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

Сделать мобильное меню для сайта на 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>