НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

Создание респонсив меню

0

Одной из самых сложных частей респонсивности веб-сайта является его “Навигация”. Этот функционал является очень важным элементом, так как это один из самых главных способов посетителей увидеть все страницы вашего веб-сайта. Сущевствует много способов по созданию респонсив навигации для веб-сайта и даже есть jQuery плагины, которые могут предоставить готовый функционал за минуты.

В этой статье мы покажем вам как построить простую навигацию с нуля при помощью CSS3 Media Queries и jQuery таким образом, чтобы она правильно отображалась на экране мобильного телефона.

Демо:

Нажмите здесь для просмотра демо респонсив меню.

HTML

Прежде всего, давайте добавим мета просмотр в хедер. Этот мета тег просмотра необходим для того, чтоб наша страница масштабировалась должным образом внутри экрана любого размера, особенно при использовании мобильного устройства. Плюс мета тэг для отображения кириллицы:

… а затем добавляем следующий фрагмент в качестве навигационной разметки внутри body тега:

Как вы видите выше, у нас есть шесть основных пунктов меню и добавлена еще одна ссылка за ними. Эта дополнительная ссылка будет использована, чтобы показать навигацию по меню, когда оно спрятано в небольшом экране.

responsive-menu1

Стили

В этом разделе мы применим CSS стили к навигации. Стиль здесь будет просто декоративным, вы можете выбрать любой цвет по вашему желанию. Но в этом случае, мы (лично) хотим стилизовать под мягкие синие тона!

NAV тег, который определяют навигацию, будет 100% во всю ширину окна браузера, в то время как ul, где содержится наша основная ссылка на меню будет 600px по ширине.

Затем мы передвинем меню ссылок влево, так они будут отображаться горизонтально рядом друг с другом, но двигающейся элемент также будет вызывать родительский (parent) коллапс.

Если вы заметили из разметки HTML выше, мы уже добавили Clearfix класс для nav и ul, чтобы очистить вещи вокруг, когда мы передвигаем элементы внутри него с помощью CSS3 Clearfix хака. Итак, давайте добавим следующие правила стиля в таблицу стилей.

Так как у нас в меню есть шесть ссылок,  мы указываем контейнер на 600px, таким образом, у каждой ссылки меню будет 100 пикселей по ширине.

Ссылки меню будут разделены 1px правой границой, за исключением последнего. Так как ширина меню будет расширена на 1px, что сделает его 101px при использовании дополнительной границы, так что здесь мы меняем box-sizing модель на border-box, чтобы меню сохранялось в100px:

Далее, у меню будет яркий цвет, когда он находится в :hover или :active состояние:

… И, наконец, дополнительные ссылки будут скрыты (для рабочего стола):

На данный момент, мы только стилизуем навигацию и ничего не будет работать при изменении окна браузера. Итак, давайте перейдем к следующему шагу.

Media Queries

CSS3 Media Queries используется для того, чтобы определить, как стили будут смещаться в определенных точках остановки или на разных размерах экрана. Так как наша навигация изначально была 600px фиксированной ширины, то в начале мы укажем стили, когда она будет проссматриваться в 600px или меньшим размером экрана, так что, практически говоря, это наша первая точка остановки.

responsive-menu2

В этом размере экрана, каждый из двух пунктов меню будет отображаться рядом друг с другом, поэтому ul ширина здесь будет 100% окна браузера, в то время как меню ссылок будет 50% ширины.

… И потом, мы также определяем как навигация будет отображатся, когда экран  меньше 480px  (так что это наша вторая точка остановки).

В этом размере экрана, дополнительная ссылка, которую мы добавили, станет видимой, мы также добавим иконку ☬ ( Unicode 262D) и сместим ее на правую сторону используя :after псевдо-элемент, в то время как основные ссылки меню будут скрыты, чтобы сохранить вертикальное пространство на экране.

 

responsive-menu3

Наконец, когда экран становится меньше 320px, меню будет отображаться вертикально, сверху вниз.

Вы можете попробовать изменить размер окна браузера. Теперь оно должно быть в состоянии адаптироваться под размер экрана.

Показ меню

На данный момент, меню будет по-прежнему скрыто и будет видно только, когда это необходимо, нажав на него или нажав на кнопку “Меню”. Сделать это мы сможем при помощью JQuery slideToggle ().

Однако, при изменении размеров окна браузера сразу после того, как вы только его просмотрели и спрятали в маленький экран, меню будет оставаться скрытыми, так как display:none стиль порожденный JQuery будет еще привязан к элементу.

Итак, нам нужно, удалить этот стиль при изменение размера окна, а именно:

Вот и весь код, который нам нужен для создания респонсив меню. Удачи в ваших разработках!

Поделиться:

Об Авторе

Редакция портала WebDesignMagazine.ru -онлайн журнал о веб-дизайне.