HTML, CSS, jQuery: Меню для мобильных сайтов. Обучение опубликовал Радик Алиев категория  
просмотры 49 762

HTML, CSS, jQuery: Меню для мобильных сайтов. Обучение

Одна из распространенных проблем при создании базового дизайна сайтов для мобильных телефонов – это навигационное меню. Если сайт имеет множество разделов и страниц, то это должно вас заставить задуматься, о том, чтобы сделать меню компактным, наиболее сжатым, но в то же время функциональным и эффективным. Вероятнее всего, меню у вас может получиться либо в несколько линий, либо кнопки могут находиться друг над другом. Это выглядит не очень эстетично. В этом уроке мы рассмотрим, как с помощью 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-код для меню, использованный в данном обучении:

Код jQuery

Вложите копию jQuery и функцию данную ниже между тегами  <head>. Функция добавит тег  <div id="menu-icon" в тег  <nav id="#nav-wrap">. И когда будет происходить клик по элементу/иконке «МЕНЮ», меню будет открываться дополнительным элементом.

HTML код будет выглядеть так, как показано ниже (для этого нужно нажать «Посмотреть Элемент» или посмотреть сгенерированный код)

CSS

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

В стиле иконки меню изначально установлено display:none. Используя медиа запрос я изменил его на display:block, если ширина области просмотра будет меньше, чем 600 пикселей.

Там же изменяем стиль и навигационных пунктов меню. Указываем display:none. Таким образом, панель навигации не будет видна, пока мы не нажмем кнопку меню – это определено в функции jQuery в шаге выше. Когда же мы нажмем кнопку меню, наша панель откроется, и для выбора будет доступен любой из пунктов меню.
Заключительная демонстрация.

Чтобы увидеть окончательный результат того что у вас должно получиться перейдите сюда (http://webdesignerwall.com/demo/mobile-nav/) с вашего браузера и сузьте минимально окно, либо по этой же ссылке перейдите с мобильного телефона.

Теги:

6 Комментарий

Оставить комментарий
  1. Саша Ноябрь 24, 2015 at 6:26 дп #

    Спасибо! Это идеальный вариант для мобильной навигации.

  2. Александр Февраль 1, 2016 at 2:19 пп #

    Уже весь интернет перерыл, а ответа не нашел. Может Вы подскажете. Есть меню в виде списка ul, а надо,чтобы при уменьшении размера экрана вместо него отображался выпадающий список select. Это позволит на Opera mini выберать пункт меню без дополнительной подгрузки меню. А как реализовать не знаю, может яваскрипт надо использовать, но хотелось бы на ЦСС. Спасибо.

    • Gennady Февраль 2, 2016 at 9:14 пп #

      пропишите в стилях для ul class=»вашкласс»

      и ul исчезнет при width менее 960px. select соответственно отобразить..

  3. Владимир Февраль 9, 2017 at 2:27 пп #

    Протестировал на мобильном телефоне — плохо работает, при нажатии сразу не выпадает, нужно держать

  4. Димир Май 1, 2017 at 1:15 пп #

    Здравствуйте.
    А как сделать такое мобильное меню, чтобы при нахождении пользователя статье одной рубрики — при нажатии на «меню», выскакивало «меню-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();

    Как примерно это же реализовать в мобильном меню?

Добавить комментарий для Gennady Click here to cancel reply.

vk_like_site