Меню для мобильной версии сайта

Адаптируем горизонтальное меню

В первой части видео показывал, как можно реализовать горизонтальное меню при помощи display:flex;, данное видео продолжение, и тут будем адаптировать горизонтальное меню под мобильные устройства. Рекомендую посмотреть видео по Media queries CSS на базе которого будем проводить адаптацию.

See the Pen NwOREZ by Denis (@Dwstroy) on CodePen.

В видео уроке задействуем:

  • Дополним верстку мета тегом <meta name=»viewport» …>
  • Задействуем input с атрибутом type=»checkbox»;
  • Используем label с атрибутом  for=»…..» для отслеживания клика;
  • Воспользуемся медиа запросом @media all and (max-width: 800px);
  • И для анимации применим transition;

Определяемся, какой хотим достичь результат.

Нам нужно, что бы меню на маленьких расширений экрана менее 800 пик. по ширине, переводилось в одну строку, содержание его пунктов скрывалось, появлялась кнопка с «МЕНЮ» и иконкой. По нажатию на кнопку будем отображать весь список с соответствующими иконками. У разделов включенные в себя подменю добавим иконку в виде треугольника, символизирующая, что там есть подразделы, а по нажатию на данный раздел с иконкой, разворачивается вложенный список, по второму клику вкладки будем сворачивать.

горизонтальное меню под мобильное устройство

Суть я думаю, вы уловили, и по окончанию урока мы получим такой результат.

Мобильная версия горизонтального меню

Скачиваем и подготавливаем код

Скачаем с предыдущего урока код горизонтального меню «Выпадающее меню на чистом CSS / HTML». Перенесем его в свою среду разработки, в моем случае использую PhpStorm, в группе VK найдете на этот редактор ссылку, скачивайте, устанавливайте и пользуйтесь https://vk.com/topic-70729755_35330805.

И так, откроем index.html страницу, включим режим просмотра для мобильных устройств и на текущий момент видим, горизонтальное меню не адаптировано и нам предстоит с этим поработать.


Урок как сделать адаптивное меню

Я первым делом создам отдельный файл, где буду описывать код мобильного меню. Это поможет в дальнейшем избежать путаницы и Вам будет проще ориентироваться в написанных стилях.

В директории CSS создаем media.css. В Index.html подключаем данный файл, обязательно обратите внимание, что бы он находился ниже основного стиля, так как в первую очередь, подгружаем style.css, а затем уже media.css для адаптации горизонтального меню. 

<link rel="stylesheet" href="css/media.css" type="text/css">    

Так как будем адаптировать меню под мобильные устройства воспользуемся мета тегом viewport со следующими атрибутами, name=»viewport» и content=»width=device-width, initial-scale=1″. Прописываем тег в самом верху после UTF-8.

<meta name="viewport" content="width=device-width, initial-scale=1">   

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


Давайте более подробнее разберем его составляющую:

Атрибут name указывает браузеру что данная страница касается информации viewport, то есть это видимая область пользователю веб-страницы. Та область, которая в свою очередь видна без прокрутки.

Второй атрибут данного тега content имеет пару ключей со своими значениями.

Параметр width со значением device-width отвечает за ширину видимой области, что бы она равнялась ширине устройства, а второй параметр initial-scale устанавливает первоначальный масштаб веб-страницы. Значение 1 означает, что масштаб равен 100%.

Так же у этого тега есть другие параметры, но в рамках данного урока они нам не понадобятся, нам достаточно этих данных что бы адаптировать меню.

Описываем CSS стили под мобильные устройства

Переходим в media.css, в нем опишем медиа запрос под расширения менее 800 пик.  Пишем стандартную конструкцию media запроса. Основному блоку меню с классом .dws-menu добавляем overflow: hidden; для того чтобы сформировать отступ от краев.

@media all and (max-width: 800px) {   .dws-menu{   overflow: hidden;   }  }   

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

горизонтальное меню

Есть и другие варианты реализации данной идее, можно скрывать и отображать при помощи JS скрипта, но в этом случае идет дублирование кода и не во всех браузерах удается его стилизовать. К тому же у нас урок по CSS и будем придерживаться данной темы.

Я разделяю написание кода на три этапа:


  • в первом этапе описываем его основную структуру, и стили;
  • во втором этапе анимируем;
  • и заключающим третьим этапом, предаем красивое оформление.

Идею я думаю вы поняли, и приступим к описанию кода.

Предварительно выстроим меню в вертикальном виде, для этого достаточно сделаем UL блочным элементом.

.dws-menu ul{   display: block;   }   

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

Теперь добавим в верстку сайта следующие селекторы input и label с использованием checkbox, который будет принимать щелчок  и отображать меню.

Перед списком вставляем input, в нем прописываем атрибут type со значением checkbox, дадим имя, обязательно присвоим ID при помощи которого label будет отслеживать нажатие по данному селектору. Далее присвоим инпуту класс, для его дальнейшего оформления.

Затем опишем  label, у которого основная функция отследить клик по определенному input, в нем обязательно пропишем атрибут for со значением ID с input, присвоим свой класс для стилилизации, а в нутрии прописываем иконку, которую возьмем из подключенных нами до этого шрифтов.


<input type="checkbox" name="toggle" id="menu" class="toggleMenu">  <label for="menu" class="toggleMenu"><i class="fa fa-bars"></i>Меню</label>   

Далее переходим в медиа стили и приступим к их оформлению.

Скроем полностью checkbox в блоке .dws-menu, они нам тут не понадобятся. Пропишем их выше основных стилей так как к @media запросам они не относятся.

.dws-menu [type="checkbox"]{   display: none;  }   

Затем стилиллизуем кнопку label, код опишем выше @media запроса, что бы эти стили применялись изначально когда страничка загрузилась.

Отбираем кнопку .dws-menu label.toggleMenu, задаем задаем ей цвет background: #C9C9C9;, и делаем кнопку блочным элементом, что бы она приняла форму данного меню.

.dws-menu label.toggleMenu{   background: #C9C9C9;   display: block;  }   

Приводим ее к внешнему виду, как выглядят основные кнопки. Для этого сделаем внутренние отступы padding: 15px 40px; , текст пропишем заглавными буквами и немного его уменьшаем. При наведении делаем cursor: pointer;.

Далее с позиционируем иконку, и для этого зададим блоку position: relative;:


.dws-menu label.toggleMenu{   background: #C9C9C9;   display: block;   padding: 15px 40px;   text-transform: uppercase;   font-size: 14px;   cursor: pointer;   position: relative;  }   

Отбираем иконку, и позиционируем ее абсолютно данному блоку, увеличим до 18 пик. что бы она сочеталась с остальными иконками.

.dws-menu label.toggleMenu .fa{   position: absolute;   top: 15px;   left: 12px;   font-size: 18px;  }   

Теперь нужно при маленьком разрешении скрыть все пункты и оставить одну кнопку. Для этого пишем в медиа запросе display: none;

.dws-menu ul{   display: none;  }   

мобильное меню для сайта

При широком расширении, тоже ее скрываем:

.dws-menu label.toggleMenu{   background: #C9C9C9;   display: none;   padding: 15px 40px;   text-transform: uppercase;   font-size: 14px;   cursor: pointer;   position: relative;  }   

А в мобильной версии отобразим:

.dws-menu label.toggleMenu{   display: block;  }   

Следующим этапом по щелчку нужно поменять цвет на более темный и развернуть основной список. Для этого будем отслеживать щелчок мышкой и менять цвет кнопки.

Отбираем кнопку при щелчке, и применяем к ней действия, меняем цвет кнопки и шрифта:

input.toggleMenu:checked + label.toggleMenu{   background: #000;   color: #fff;  }   

Далее прописываем отображение основного списка меню. Отбираем щелчек по кнопке, и при помощи данной конструкции  описываем к чему его применить.

input.toggleMenu:checked ~ ul{   display: block;  }   


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

С основным меню мы разобрались, и можно приступать к описанию вложенных пунктов меню.

Описываем вложенные пункты

Для удобства просмотра выпадающих списков я в основном стиле скрою отступ меню, что бы его расположить в самом верху экрана.

header{   /*margin-top: 200px;*/   font-family: Cuprum, Arial, Helvetica, sans-serif;  }   

По аналогии как делали с основным меню, практически то же самое делаем с вложенными пунктами. Добавляем к пункту «Продукция» input и label и опишем стили его отображения.

<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m1">  <a href="#"><i class="fa fa-shopping-cart"></i>Продукция</a>  <label for="sub_m1" class="toggleSubmenu"><i class="fa"></i></label>   

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


.dws-menu [type="checkbox"],  .dws-menu label.toggleSubmenu{   display: none;  }  

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

.dws-menu label.toggleSubmenu{   position: absolute;   top: 0;   right: 0;   width: 100%;   height: 100%;   cursor: pointer;   display: block;  }   

При нажатии на пункт меню меняем цвет фона и шрифта:

input.toggleSubmenu:checked ~ a{   background: #454547;   color: #fff;  }   

Далее разворачиваем все пункты подменю:

input.toggleMenu:checked ~ ul,  input.toggleSubmenu:checked ~ ul{   display: block;   position: relative;  }   

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

Отбираем libel субменю и при помощи псевдоэлементов добавим иконку с подключенных шрифтов.

Цвет делаем у нее серым:

.dws-menu label.toggleSubmenu .fa::before{   content: "f0d7";   color: #454547;  }   

С позиционируем иконку по правой стороне:


.dws-menu label.toggleSubmenu .fa{   position: absolute;   top: 15px;   right: 30px;  }   

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

.dws-menu input.toggleSubmenu:checked ~ label.toggleSubmenu .fa::before{   content: "f0d8";   color: #ffffff;  }   

Делаем стрелку при адаптации меню

По аналогии прописываем input и label в последующих меню в данной группе, только обязательно меняем у них идентификатор.

Следующий пункт это «Услуга» и там пропишем данные параметры:

<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m2">  <a href="#"><i class="fa fa-cogs"></i>Услуги</a>  <label for="sub_m2" class="toggleSubmenu"><i class="fa"></i></label>   

Описываем вложенные подпункты

По аналогии как делали с основным меню, практически туже операцию нужно провести и с вложенными субменю. Первым делом пропишем input и label в одном из подменю. 

Первый пункт по списку идет «Одежда», пишем там свою конструкцию и сразу проверяем что получилось:


<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m1-1">  <a href="#">Одежда</a>  <label for="sub_m1-1" class="toggleSubmenu"><i class="fa"></i></label>   

Практически меню готово осталось немного у него подкорректировать ширину. Смотрим из за чего она так формируется. Видим, что основными стилями добавляется отступ и нам нужно его убрать.

Как сделать выпадающее мобильное меню

Отбираем вложенные меню и позиционируем его абсолютно с отступами в автомате:

.dws-menu li > ul li ul{   position: absolute;   right: auto;   top: auto;  }   

Дописываем следующие пункты в данной ветке и не забываем задаем каждому пункту свой ID.

<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m1-2">  <a href="#">Электроника</a>  <label for="sub_m1-2" class="toggleSubmenu"><i class="fa"></i></label>   
<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m1-2-1">  <a href="#">Телефоны</a>  <label for="sub_m1-2-1" class="toggleSubmenu"><i class="fa"></i></label>   

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

Анимирование элементов

Идея анимирования не просто появления меню, а плавное его выезжание по клику с верху в низ.

Для этого нам нужно задействовать высоту блока и повещаем на нее анимацию.

Меняем у блока ul display на block, и скрываем его не при помощи none, а про помощи max-height в ноль. Прописываем дополнительно transition в 0,3 сек по данному параметру.

.dws-menu ul{   display: block;   max-height: 0;   transition: max-height 0.3s;   }   

А при клике добавляем max-height: 5000px; и transition делаем в 2 сек.

input.toggleMenu:checked ~ ul,  input.toggleSubmenu:checked ~ ul{   display: block;   position: relative;   max-height: 5000px;   transition: max-height 2s ease-in;  }   

В заключении допишем ингредиент кнопки как у всех изначально. Для этого открою основной стиль, скопирую данный ингредиент и вставим в @media файл.

.dws-menu label.toggleMenu{   background: #c9c9c9; /* Old browsers */   background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */   background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */   background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#757577',GradientType=0 ); /* IE6-9 */     display: none;   padding: 15px 40px;   text-transform: uppercase;   font-size: 14px;   cursor: pointer;   position: relative;  }   

На этом все код Мобильного меню готов, и теперь можно его проверять на разных расширениях.

Обязательно внедряйте приобретенные знания в свои проекты и пользователи это оценят.

Оставить комментарий:

dwstroy.ru

Мобильное меню для сайта html код

Прежде всего, давайте добавим meta viewport внутри тега head. Этот тег необходим для правильного масштабирования нашей страницы на мобильных устройствах.

А затем добавьте следующий фрагмент кода в качестве разметки меню внутри тега body.

Как вы можете видеть выше у нас есть 6 пунктов меню и ссылка после тега ul. Эта ссылка будет открывать мобильное меню сайта на маленьких устройствах.

Css стилизация меню

В этой части статьи мы начнем стилизацию меню. Стиль будет не идеальный, и вы можете выбрать любые цвета и дизайн по вашему желанию. В нашем примере будет у body кремовый цвет.

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

Теперь мы выровняем элементы меню горизонтально друг за другом, после их выравнивания произойдет float collapse родительского элемента.

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

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

Пункты меню будут разделены между собой правой рамкой размером 1px, кроме последнего. Исходя из простой блочной модели, рамка увеличит наш элемент на 1px и его ширина будет равна 101px. Чтобы это исправить и рамка не входила в ширину ссылки необходимо ей добавить css правило box-sizing:border-box;

Далее добавим стили для состояния ссылки :hover и :aсtive

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

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

Мобильное меню для сайта на большом экране

CSS медиа запросы для меню

CSS3 медиа запросы используются для определения стилей для разных устройств, а так же в контрольных точках. К примеру на телефонах это от 320px до 767px, планшеты до 1024px.

Нашей первой контрольной точкой будет ширина 600px и меньше. Так как ширина меню 600px и при большем разрешении все будет выглядеть хорошо.

Когда ширина экрана будет равна 600px нам нужно задать ширину ul 100%, а элементы меню разместить друг за другом в две колонки. Ширина каждого будет равна 50% от ширины ul.

меню для мобильной версии сайта css

Следующее что мы сделаем это определим как себя будет вести меню на экранах меньше 480px, это будет нашей второй контрольной точкой.

На этом разрешении мы сделаем видимым ссылку с id=’pull’, которую мы добавили и скрыли ранее. Добавим ей немного стилей с помощью псевдоэлемента ::after. А элементы меню будут скрыты для более компактного отображения меню.

выпадающее меню для мобильной версии сайта

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

Теперь мы можем уже проверить адаптивность меню в браузере. Последнее что осталось это заставить меню открываться и закрываться по нажатию ссылки с id=’pull’.

jQuery код для мобильного меню.

На данный момент меню по-прежнему будет скрыто и будет отображаться только тогда, когда это необходимо, по тапу или щелчку ссылки «Меню», и мы сможем добиться этого, используя jQuery функцию slideToggle().

Далее нам нужно исправить небольшой bug, когда вы изменяете размер окна браузера сразу после того, как вы только что просмотрели и спрятали меню на маленьком экране, меню останется скрытым. Итак, удалить стиль который скрывает меню при изменении размера окна можно при помощи кода ниже:

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

comments powered by HyperComments

webupblog.ru

Функция wp_is_mobile

Данный условный оператор проверяет посещает ли человек ваш сайт с мобильного устройства, возвращает значение True или False. Синтаксис его следующий:

Работает функция через определение значение строки User Agent в браузере посетителя — $_SERVER[‘HTTP_USER_AGENT’] (например, Mobile, Kindle, Android, BlackBerry, Opera Mini и т.п.). Однако при этом она не передает данные о размерах экрана или названии устройства — только True / False.

В Wodpress wp_is_mobile не используется для выбора/задания стилей адаптивного дизайна. Он лишь определяет элементы веб-проекта, которые должны выводиться исключительно на мобильных устройствах не зависимо от размера экрана — соответствующие классы, viewport, скрипты сенсорного дисплея и т.п.

Внимание! В функции есть 2 нюанса:

  1. Если кто-то решит подменить значение User Agent, то система не сможет это распознать.
  2. Когда у вас включено кэширование, информация каждый раз не обновляется, поэтому вы получаете один и тот же результат постоянно, и решение становится бесполезным (возможно, из-за этого приходится каждый раз сбрасывать кэш браузера для просмотра мобильной версии через инструменты разработчика).

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

Алгоритм создания альтернативного мобильного меню

1. Первым делом заходим в раздел админки «Внешний вид» — «Меню». Здесь нужно создать два меню разные для каждой из версий, например:

  • top-mobile-menu — вариант под моб.устройства;
  • top-pc-menu — под десктопную обычную версию.

Меню для мобильной версии сайта

2. Далее в файле дочерней темы используемого шаблона, отвечающем за вывод шапки (header.php или др.), вставляете вместо вывода меню конструкцию:

В вашем макете код может немного отличаться за счет дополнительных параметров функции wp_nav_menu. Суть метода в том, чтобы в качестве мобильного меню WordPress выводить вариант top-mobile-menu, для обычного — top-pc-menu (если надо, подставляйте свои названия).

После внедрения проверяете работу навигации на смартфонах/планшетах. Как я уже сказал выше, функия wp_is_mobile определяет именно User Agent, поэтому желательно заходить на сайт с телефона, вариант с панелью разработчика Ctrl+Shift+I может глючить. 

wordpressinside.ru

Быстрый переход

searchengines.guru

Мобильная версия для сайта стала основополагающим критерием при разработке любого современного проекта. Оптимизировать сайт под планшеты и телефоны не так сложно, однако встречаются задачи, с которыми тяжело справиться — например, как сделать адаптивным меню на сайте для смартфона, когда в нем еще много подменюшек? — ответ прост — использовать select меню на JQuery.

Представляю уникальный скрипт с помощью которого вы легко сможете сделать красивое выпадающее меню для любого сайта. В нем вы можете настроить внешний вид как пожелаете. Работает следующим образом: когда ширина экрана 760 px (можно изменить) — основное меню исчезает, а мобильное появляется. См. скриншоты:

Меню для мобильной версии сайта Меню для мобильной версии сайта Меню для мобильной версии сайта

Возможности мобильного меню:
— для работы надо указать селектор ul меню
— строится сразу после ul меню
— строит подменю
— показывает выбранный пункт меню
— возможность создавать бесконечное число таких меню

Установка меню:
1. Проверьте, что у вас есть запись для мобильного контента <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> между тегами <head></head>. Если ее нет — ставьте.
2. Если у вас не подключена библиотека jquery — подключайте jquery-1.9.1.min.js (идет с архивом)
3. Запомнтие класс или id вашего изначального ul меню (например: <ul id=»menu-top-menu»> — значит id = menu-top-menu) и вставьте запись типа:
jQuery(function(){jQuery(‘#menu-top-menu’).mobileMenu({defaultText: «Навигация по сайту»});}); — чтобы запустить мобильное меню

Для демонстрации уменьшите размер экрана моего сайта до 760px — появится select меню — также будет работать и у вас!

Более подробную информацию об уставке с моими комментариями вы найдете в архиве + рабочий скрипт меню без мусора

Скачать JQuery select мобильное меню:

blogprogram.ru

1. Навигация вверху или оставляем все как есть

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

Такой подход используется в темах оформления Simpliste.

Преимущества

Достигается проще всего. Не нужно использовать Javascript (и нет зависимости от него), не нужно невероятных маневров с CSS.

Недостатки

Проблема может начаться тогда, когда количество пунктов меню слишком велико. Во-первых, высота блока навигации может стать такой, что он полностью перекроет содержимое сайта на первой странице и пользователю придется «листать» сайт вниз, чтобы добраться до нужной ему информации. И так на каждой странице сайта. Во-вторых, возникает вопрос многоуровневых меню. Если их просто выстроить одно под другим, то возвращаемся к проблеме высоты блока навигации. В-третьих, если все заранее не предусмотреть, то добавление новых пунктов меню может вызвать неприятное «съезжание» и переносы.

Примеры

Меню для мобильной версии сайта Меню для мобильной версии сайта

Меню для мобильной версии сайта

2. Ссылка на футер, к навигации

Демо с полным описанием.

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

Достоинства

Остается единственная ссылка в шапке, которая занимает очень мало места. Нет зависимости от скриптов.

Недостатки

Придется дописывать дополнительный CSS код, чтобы либо перемещать меню из футера вверх на настольных компьютерах (с помощью position:absolute или position:fixed), либо прятать меню в шапке на мобильных устройствах, если оно дублирует меню футера. Кроме того, ощущение от резкого «прыжка» при перемещении по такой ссылке может застать пользователя врасплох.

Пример

Меню для мобильной версии сайта

Меню для мобильной версии сайта

3. Выпадающий список (<select>) вместо навигации

Демо с полным описанием.

Такой подход распространяется все больше. Здесь используется Javascript, который «пробегается» по всем пунктам меню, создавая из них список . То есть навигацией станет интерфейсный элемент, поддерживаемый операционной системой посетителя.

Процесс написания скрипта для такого меню был подробно описан в статье на Smashing Magazine. Но можно воспользоваться готовым плагином jQuery, как я и сделал в собственном решении.

Достоинства

Выгладит компактно. Узнаваемо как элемент навигации и привычно пользователю. Для сайтов со сложной навигацией и вложенными меню может стать отличным решением.

Недостатки

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

Примеры

Меню для мобильной версии сайта Меню для мобильной версии сайта

Меню для мобильной версии сайта

4. Раскрывающееся меню

Демо с полным описанием.

Этот подход тоже достаточно популярен. Особенно учитывая возможность экспериментировать с дизайном. Суть его в том, что в мобильной версии меню прячется, но остается ссылка или кнопка, нажав на которую можно раскрыть навигацию. Работает все с помощью Javascript. Можно сравнить подход со ссылкой на футер, но в данном случае меню возникает там же, где пользователь нажал на кнопку, то есть вверху страницы. Как вариант, пару самых главных ссылок можно оставить, а при нажатии на кнопку раскрывать остальные.

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

var menuText = "Menu";  $(  function(){  $("body").addClass("js");   $(".menu_main").prepend("<a href='#' class='link_nav'>"+ menuText +"</a>");    $(".menu_main li:has(ul)").addClass("menu_parent");    $(".link_nav").click(  function(){  $(".menu_main > ul").toggleClass("menu_expanded");  $(this).toggleClass("menu_parent_exp");  return false;  }  )  $(".menu_parent").click(  function(){  $(this).find(">ul").toggleClass("menu_expanded");  $(this).toggleClass("menu_parent_exp");  return false;  }  )   } ) 

Скриптом создается ссылка, которая будет раскрывать предварительно скрытое меню. Посмотреть в деле и взять необходимые стили можно в демо.

Достоинства

Выглядеть может так, как пожелаете. Пользователя никуда не перебрасывает. Для вложенных меню есть возможность создавать иерархии с раскрытием при нажатии.

Недостатки

Зависимость от Javascript. Возможные проблемы с производительностью, если потребуется анимировать меню.

Примеры

Меню для мобильной версии сайта Меню для мобильной версии сайта Меню для мобильной версии сайта Меню для мобильной версии сайта

Меню для мобильной версии сайта

5. Выезжающее меню со сдвигом контента

Демо с полным описанием.

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

Готового решения найти не получилось, поэтому было создано свое.

$(  function(){  $("body").addClass("js");    $(".link_nav").click(  function(){  $("body").toggleClass("mobile_nav");  }  );  } ) 

На самом деле, не много скриптов.

Основную работу выполняет CSS. При изменении класса тега body меняется положение меню, которое спозиционировано через position:fixed, а контент приобретает дополнительный отступ слева, уступая место меню. В браузерах Webkit удалось даже добиться анимации через CSS transitions, то есть в айфонах и андроидах меню будет эффектно выезжать. Опять же, посмотреть и взять необходимые стили можно в демо.

Есть недостаток, который нужно описать отдельно. Когда в меню слишком много пунктов, то меню с position:fixed будет «съедаться» нижним краем. В таком случае помогает использование position:absolute, но происходит «прыжок» к началу сайта после клика на кнопку-ссылку.

Достоинства

Интересное решение, возможность экспериментировать с внешним видом. Контекст не теряется, так как контент, хоть и прикрыт краем окна, но все же виден.

Недостатки

Зависимость от Javascript, необходимость настраивать CSS. position:fixed поддерживается не во всех старых версиях мобильных устройств (там будет position:absolute), описанная выше проблема с высотой меню.

Пример

Меню для мобильной версии сайта

habr.com

Вы хотели бы создать меню, адаптированное под мобильные устройства? Трафик мобильных устройств уже давно превышает десктопный на многих ресурсах. Добавление мобильного адаптивного меню существенно упрощает навигацию для пользователей вашего сайта. В этой статье мы покажем вам как легко создать адаптивное меню под мобильные устройства в WordPress.

mobileresponsivemenu[1]
В статье мы покажем как реализовать задуманное с помощью плагина (для новичков, без кода), а также — с помощью кода для более продвинутых пользователей.

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

Готовы? Начинаем.

Способ 1: Добавляем адаптивное меню в WordPress с помощью плагина

Этот способ достаточно простой и рекомендуется для новичков, т.к. не потребует добавления кода.

Здесь мы будем создавать меню-бутерброд, которое выезжает на мобильных разрешениях экрана.

rpmenuplugin[1]

Первым делом вам потребуется установить и активировать плагин Responsive Menu.

После активации плагин добавит новый элемент меню под названием ‘Responsive Menu’ в админбар. Нажав на него, вы окажетесь на странице настроек плагина.

responsivemenusettings[1]

Для начала потребуется указать ширину экрана, при которой плагин начнет отображать адаптивное меню. Значение по-умолчанию установлено в 800px, и оно подойдет для большинства сайтов.

После этого нужно выбрать меню, которое нужно использовать для вашего адаптивного меню. Если же вы еще не создали меню, тогда сделать это можно на странице Внешний вид » Меню.

Последней опцией на экране будет указание CSS класса для вашего текущего НЕ адаптивного меню. Это позволит плагину скрывать ваше не адаптивное меню на маленьких экранах.

Не забудьте нажать на кнопку ‘Update Options’ для того, чтобы сохранить изменения.

Теперь переходим на сайт и изменяем размер окна браузера для того, чтобы увидеть адаптивное меню в действии.

rpmenuplugin[1]

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

Способ 2: Добавляем меню в виде выпадающего списка с помощью плагина

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

selectmenu[1]

Для начала вам потребуется установить и активировать плагин Responsive Select Menu.

После активации переходим в Внешний вид » Responsive Select для настроки плагина.

selectmenu[1]

Прокручиваем до раздела ‘Activate theme locations’. По-умолчанию, плагин активируется для всех расположений меню в теме. Можно изменить это поведение, оставив его только для нескольких областей.

Не забудьте нажать на кнопку сохранения изменений.

Теперь переходим на свой сайт, меняем размер браузера для того, чтобы увидеть меню в виде выпадающего списка.

Способ 3: Создаем адаптивное мобильное меню с раскрывающимся (toggle) эффектом

Одним из самых часто используемых способов вывода меню на мобильные экраны является использование раскрывающегося эффекта.

Способ предполагает добавление кода в файлы вашей WordPress темы.

Для начала открываем текстовый редактор типа Блокнот и вставляем этот код:

  ( function() {  	var nav = document.getElementById( 'site-navigation' ), button, menu;  	if ( ! nav ) {  		return;  	}    	button = nav.getElementsByTagName( 'button' )[0];  	menu = nav.getElementsByTagName( 'ul' )[0];  	if ( ! button ) {  		return;  	}    	// Скрываем кнопку, если меню отсутствует или пустое.  	if ( ! menu || ! menu.childNodes.length ) {  		button.style.display = 'none';  		return;  	}    	button.onclick = function() {  		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {  			menu.className = 'nav-menu';  		}    		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {  			button.className = button.className.replace( ' toggled-on', '' );  			menu.className = menu.className.replace( ' toggled-on', '' );  		} else {  			button.className += ' toggled-on';  			menu.className += ' toggled-on';  		}  	};  } )(jQuery);  

Теперь сохраняем этот файл как navigation.js на своем компьютере.

Далее, открываем FTP-клиент для того, чтобы загрузить этот файл в папку /wp-content/themes/your-theme-dir/js/ вашего сайта.

Замените your-theme-directory на папку вашей текущей теме. Если же в ней нет папки js, то потребуется ее создать.

После загрузки JavaScript файла, нужно будет подключить на сайт. Добавляем код в файл functions.php вашей темы или в плагин для сайта WordPress:

  wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );  

Теперь добавляем меню навигации в свою тему WordPress. Обычно меню навигации добавляется в файл header.php темы.

[/php]

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

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

  /* Меню навигации */  .main-navigation {  	margin-top: 24px;  	margin-top: 1.714285714rem;  	text-align: center;  }  .main-navigation li {  	margin-top: 24px;  	margin-top: 1.714285714rem;  	font-size: 12px;  	font-size: 0.857142857rem;  	line-height: 1.42857143;  }  .main-navigation a {  	color: #5e5e5e;  }  .main-navigation a:hover,  .main-navigation a:focus {  	color: #21759b;  }  .main-navigation ul.nav-menu,  .main-navigation div.nav-menu > ul {  	display: none;  }    .main-navigation ul.nav-menu.toggled-on,  .menu-toggle {  	display: inline-block;  }    // CSS для использования на мобильных устройствах    @media screen and (min-width: 600px) {    .main-navigation ul.nav-menu,  	.main-navigation div.nav-menu > ul {  		border-bottom: 1px solid #ededed;  		border-top: 1px solid #ededed;  		display: inline-block !important;  		text-align: left;  		width: 100%;  	}  	.main-navigation ul {  		margin: 0;  		text-indent: 0;  	}  	.main-navigation li a,  	.main-navigation li {  		display: inline-block;  		text-decoration: none;  	}  	.main-navigation li a {  		border-bottom: 0;  		color: #6a6a6a;  		line-height: 3.692307692;  		text-transform: uppercase;  		white-space: nowrap;  	}  	.main-navigation li a:hover,  	.main-navigation li a:focus {  		color: #000;  	}  	.main-navigation li {  		margin: 0 40px 0 0;  		margin: 0 2.857142857rem 0 0;  		position: relative;  	}  	.main-navigation li ul {  		margin: 0;  		padding: 0;  		position: absolute;  		top: 100%;  		z-index: 1;  		height: 1px;  		width: 1px;  		overflow: hidden;  		clip: rect(1px, 1px, 1px, 1px);  	}  	.main-navigation li ul ul {  		top: 0;  		left: 100%;  	}  	.main-navigation ul li:hover > ul,  	.main-navigation ul li:focus > ul,  	.main-navigation .focus > ul {  		border-left: 0;  		clip: inherit;  		overflow: inherit;  		height: inherit;  		width: inherit;  	}  	.main-navigation li ul li a {  		background: #efefef;  		border-bottom: 1px solid #ededed;  		display: block;  		font-size: 11px;  		font-size: 0.785714286rem;  		line-height: 2.181818182;  		padding: 8px 10px;  		padding: 0.571428571rem 0.714285714rem;  		width: 180px;  		width: 12.85714286rem;  		white-space: normal;  	}  	.main-navigation li ul li a:hover,  	.main-navigation li ul li a:focus {  		background: #e3e3e3;  		color: #444;  	}  	.main-navigation .current-menu-item > a,  	.main-navigation .current-menu-ancestor > a,  	.main-navigation .current_page_item > a,  	.main-navigation .current_page_ancestor > a {  		color: #636363;  		font-weight: bold;  	}  	.menu-toggle {  		display: none;  	}    	}  

Теперь переходим на свой сайт и изменяем размер браузера для того, чтобы увидеть адаптивное раскрывающееся меню в действии.

togglemenu[1]

Возможные проблемы: В зависимости от вашей WordPress темы вам потребуется поправить CSS.

Способ 4: Добавляем выезжающее мобильное меню в WordPress

Еще одной распространенной техникой добавления мобильного меню является использование выезжающей панели меню (как показано в Способе 1).

Способ 4 предполагает добавление кода в файлы вашей темы, и это способ такой же реализации меню как в Способе 1.

Для начала открываем текстовый редактор типа Блокнот и добавляем код в пустой текстовый файл.

  (function($) {  $('#toggle').toggle(   function() {   $('#popout').animate({ left: 0 }, 'slow', function() {   $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');   });   },   function() {   $('#popout').animate({ left: -250 }, 'slow', function() {   $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');   });   }  );  })(jQuery);  

Не забудьте заменить example.com на название своего домена, и your-theme на вашу текущую тему. Сохраняем этот файл под именем slidepanel.js на компьютере.

Теперь нам понадобится изображение, которое будет использоваться для иконки меню. Значок гамбургера является наиболее часто используемым для этих целей. Такого рода изображений вы сможете найти на различных сайтах. Мы будем использовать значок для меню из библиотеки Google Material Icons.

Когда вы найдете картинку, которую будете использовать, сохраните её под именем menu.png.

Далее, открываем FTP-клиент и загружаем файл slidepanel.js в папку /wp-content/your-theme/js/.

Если в папке с вашей темой нет директории JS, тогда нужно будет создать ее и затем загрузить файлы.

После этого заливаем файл menu.png в папку /wp-content/themes/your-theme/images/.

Как только файлы будут загружены, нам нужно будет убедиться в том, что ваша тема подгружает файл JavaScript, который только что был добавлен. Для этого мы воспользуемся специальной функцией WordPress.

Добавляем следующий код в файл functions.php темы:

  wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );  

Теперь нам нужно добавить код вывода меню навигации в файл header.php темы. Вам потребуется найти примерно такой код:

  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>  

Код нужно будет обернуть в HTML код для вывода выезжающего меню на маленьких экранах.

  <div id="toggle">  <img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Показать" /></div>  <div id="popout">  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>  </div>  

Обратите внимание, что меню навигации вашей темы осталось на месте. Мы всего лишь обернули его в HTML, который нужен для реализации задуманного меню.

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

Ниже приведен пример CSS, который можно использовать для начала:

  @media screen and (min-width: 769px) {  #toggle {  display:none;  }    }    @media screen and (max-width: 768px) {  #popout {  position: fixed;  height: 100%;  width: 250px;  background: rgb(25, 25, 25);  background: rgba(25, 25, 25, .9);  color: white;  top: 0px;  left: -250px;  overflow:auto;  }    #toggle {  float: right;  position: fixed;  top: 60px;  right: 45px;  width: 28px;  height: 24px;  }    .nav-menu li {  border-bottom:1px solid #eee;  padding:20px;  width:100%;  }    .nav-menu li:hover {  background:#CCC;  }    .nav-menu li a {  color:#FFF;  text-decoration:none;  width:100%;  }  }  

В зависимости от вашей WordPress темы вам может потребоваться настроить CSS для избежания конфликтов.

Вот как меню будет примерно выглядеть:

responsivemenudemo-1[1]

Мы надеемся, что эта статья помогла вам научиться создавать адаптивное меню под мобильные устройства в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

wpincode.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector