Одна из распространенных проблем при создании базового дизайна сайтов для мобильных телефонов – это навигационное меню. Если сайт имеет множество разделов и страниц, то это должно вас заставить задуматься, о том, чтобы сделать меню компактным, наиболее сжатым, но в то же время функциональным и эффективным. Вероятнее всего, меню у вас может получиться либо в несколько линий, либо кнопки могут находиться друг над другом. Это выглядит не очень эстетично. В этом уроке мы рассмотрим, как с помощью jQuery можно рационально разместить пункты меню и обеспечить быструю навигацию.
Проблема.
На скриншотах ниже показаны распространенные проблемы при построении меню. Если пунктов в меню всего четыре, то они будут расположены на одном уровне, но если кнопок пять или шесть, то меню получится в несколько линий, что довольно не практично.
http://bitfoundry.ca/
Решение.
1) Выпадающее меню.
Это одно из наиболее распространенных решений. Но тут есть и свои подводные камни. К элементам такого меню нельзя применить стили в таблице CSS. Но стилизовать меню можно с помощью плагина Chosen, в противном случае стиль выпадающего списка останется по умолчанию. К тому же, выпадающий список выглядит довольно непрофессионально. Хотя, если вас устраивает такой вариант, то вы сможете обучиться, как с помощью CSS-приемов реализовать такое меню на своем сайте.
http://www.smashingmagazine.com/
http://informationarchitects.net/
2) Блоки
Другой быстрый выход из положения, установить каждый отдельный пункт меню в виде блоков, которые расположены вертикально. Но этот способ отнимает место у заголовка. Если в меню много пунктов, то этот вариант вам точно не подойдет. Навряд ли читателям понравится прокручивать длинный список пунктов, пока они не найдут нужное для себя содержимое сайта.
http://forefathersgroup.com/
http://loveandluxesf.com/
http://www.londonandpartners.com/
3) Иконка меню.
Это последнее решение состоит в том, что для переключения навигации используется иконка/кнопка. Оно наиболее оптимальное для пользователей сайта. Так же этот метод хорош тем, что он сохраняет пространство (что очень важно для мобильных телефонов), а так же дает полную свободу для моделирования в CSS. К тому же символ меню могут быть разработаны, чтобы соответствовать общему замыслу тематики сайта.
http://www.sony.com
http://twitter.github.com/bootstrap/
http://zync.ca/
http://www.paulrobertlloyd.com/
Мобильное меню с jQuery (смотрите демо)
Это обучение покажет вам, как создать навигационное меню для мобильного сайта, описанное выше, с помощью jQuery. jQuery будет использоваться для добавления символов меню и переключателя навигации. Этот прием не требует дополнительных HTML-тэгов.
HTML
Ниже показан простейший HTML-код для меню, использованный в данном обучении:
|
1 2 3 4 5 6 7 8 |
<nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> |
Код jQuery
Вложите копию jQuery и функцию данную ниже между тегами <head>. Функция добавит тег <div id="menu-icon" в тег <nav id="#nav-wrap">. И когда будет происходить клик по элементу/иконке «МЕНЮ», меню будет открываться дополнительным элементом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ /* prepend menu icon */ $('#nav-wrap').prepend('<div id="menu-icon">Menu</div>'); /* toggle nav */ $("#menu-icon").on("click", function(){ $("#nav").slideToggle(); $(this).toggleClass("active"); }); }); </script> |
HTML код будет выглядеть так, как показано ниже (для этого нужно нажать «Посмотреть Элемент» или посмотреть сгенерированный код)
|
1 2 3 4 5 6 7 8 9 10 |
<nav id="nav-wrap"> <div id="menu-icon">Menu</div> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> |
CSS
Мы не будем разбирать здесь каждый элемент кода CSS, потому что тут все должно быть предельно ясно. Вместо этого, хотелось бы поговорить о ключевых частях кода.
В стиле иконки меню изначально установлено display:none. Используя медиа запрос я изменил его на display:block, если ширина области просмотра будет меньше, чем 600 пикселей.
|
1 2 3 |
@media screen and (max-width: 600px) { display:block; } |
Там же изменяем стиль и навигационных пунктов меню. Указываем display:none. Таким образом, панель навигации не будет видна, пока мы не нажмем кнопку меню – это определено в функции jQuery в шаге выше. Когда же мы нажмем кнопку меню, наша панель откроется, и для выбора будет доступен любой из пунктов меню.
Заключительная демонстрация.
Чтобы увидеть окончательный результат того что у вас должно получиться перейдите сюда (http://webdesignerwall.com/demo/mobile-nav/) с вашего браузера и сузьте минимально окно, либо по этой же ссылке перейдите с мобильного телефона.
Спасибо! Это идеальный вариант для мобильной навигации.
Уже весь интернет перерыл, а ответа не нашел. Может Вы подскажете. Есть меню в виде списка ul, а надо,чтобы при уменьшении размера экрана вместо него отображался выпадающий список select. Это позволит на Opera mini выберать пункт меню без дополнительной подгрузки меню. А как реализовать не знаю, может яваскрипт надо использовать, но хотелось бы на ЦСС. Спасибо.
пропишите в стилях для ul class=»вашкласс»
и ul исчезнет при width менее 960px. select соответственно отобразить..
Все заработало как часики. Спасибо за подсказку.
Протестировал на мобильном телефоне — плохо работает, при нажатии сразу не выпадает, нужно держать
Здравствуйте.
А как сделать такое мобильное меню, чтобы при нахождении пользователя статье одной рубрики — при нажатии на «меню», выскакивало «меню-1», а при его нахождении в другой рубрике и клике на «меню», выскакивало другое меню.
Для стационарных компов различное меню у меня сделано так:
if (in_category( array( ‘odin’, ‘dva’, ‘tri’) )) {
include(TEMPLATEPATH.’/header-1.php’);
} elseif (in_category( array( ‘chetyre’, ‘pyat’, ‘shest’) )) {
include(TEMPLATEPATH.’/header-2.php’);
} else {
get_header();
Как примерно это же реализовать в мобильном меню?