Мобильная версия для сайта стала основополагающим критерием при разработке любого современного проекта. Оптимизировать сайт под планшеты и телефоны не так сложно, однако встречаются задачи, с которыми тяжело справиться - например, как сделать адаптивным меню на сайте для смартфона, когда в нем еще много подменюшек? - ответ прост - использовать 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 мобильное меню:
PHP
Joomla
Joomla 1.5 модули и плагины
WordPress
Онлайн сервисы
Услуги
Работа в сети
Новое на сайте
Карта сайта
посмотрите в исходном коде примера. Там же все уже сделано.
Непонятно куда и как вставлять jQuery(function(){jQuery('#menu-top-menu').mobileMenu({defaultText: "Навигация по сайту"});});