Сделать мобильное меню для сайта на JQuery (select menu)

Сделать мобильное меню для сайта на JQuery (select menu)

3213123

Мобильная версия для сайта стала основополагающим критерием при разработке любого современного проекта. Оптимизировать сайт под планшеты и телефоны не так сложно, однако встречаются задачи, с которыми тяжело справиться - например, как сделать адаптивным меню на сайте для смартфона, когда в нем еще много подменюшек? - ответ прост - использовать 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 мобильное меню:

| | Сделать мобильное меню для сайта на JQuery (select menu) | Мобильная версия для сайта стала основополагающим критерием при разработке любого современного проекта. Оптимизировать сайт под планшеты и телефоны не | http://blogprogram.ru/wp-content/uploads/2015/09/3213123-131x131.png

2 коммент. на “Сделать мобильное меню для сайта на JQuery (select menu)”

  1. blogprogram.ru:

    посмотрите в исходном коде примера. Там же все уже сделано.

  2. Николай:

    Непонятно куда и как вставлять jQuery(function(){jQuery('#menu-top-menu').mobileMenu({defaultText: "Навигация по сайту"});});

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

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


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>