vash-web.ru

Веб-разработка, WordPress, мобильные устройства...


vash-web.ru

jQuery Responsive Select Menu — адаптивное меню для сайта

Плагин jQuery Responsive Select Menu — простое и эффективное решение для сайта с адаптивным дизайном

В бурный период развития мобильных устройств пользователи стали гораздо чаще выходить в интернет именно с этих устройств и вебмастерам приходится обращать на этот факт самое пристальное внимание. И принимать решение об адаптации своего сайта к новым реалиям. Помимо медиа-запросов,  часто непреодолимым препятствием становится адаптация основного меню к меняющимся разрешениям экрана. И наиболее простое решение в этом случае — использование jQuery Responsive Select Menu от автора: MIGHTYminnow . Этот маленький плагин встраивается в существующую навигацию, имеет несложные настройки и позволяет в кратчайший срок сделать меню адаптивным. Для его установки зайдите в Консоль управления на вкладку -Плагины>Добавить новый и в строку поиска введите — jQuery Responsive Select Menu. Нажмите — Пoиcк плaгинoв. Выберите jQuery Responsive Select Menu из списка и нажмите — Уcтaновить. По окончании установки активируйте jQuery Responsive Select Menu. Перейдите на вкладку Параметры и здесь обнаружите одноименную с установленным плагином строку. Выберите ее и попадаете в настройки:

a-menu01

a-menu02

Здесь последовательно вводите ID селектора, отвечающего за ваше меню (например: #nav), его максимальную длину, в третьей строке — символ или знак для выделения подменю, следующая строка — название вашего меню для отображения на странице сайта (например: Навигация) и последнее — отображать или нет название вашего меню в строке навигации. Для настройки внешнего вида перейдите в редактор плагинов и выберите установленный плагин. Далее откройте файл — jquery-responsive-select-menu/jquery-responsive-select-menu.php

a-menu03

и в почти самом низу файла внесите  изменения  в  — .jquery-responsive-select-menu для изменения отображения внешнего вида меню. Потом перейдите в jquery-responsive-select-menu/jrsm.css и добавьте в  .jquery-responsive-select-menu строку — width: 100%; На этом основные настройки закончены и в конечном результате должно получится примерно так… а может и лучше. Все зависит от вас.

a-menu04

Из минусов можно отметить невозможность построения многоуровневое меню. Все разделы и подменю отображаются в один выпадающий список. Посмотреть в действии можно на этом сайте, изменив разрешение страницы курсором к минимальному.




2 комментариев


Поделиться мнением








Ввод в сообщение текстовых символов смайлов (типа - :-) и :-P ) автоматически преобразовываются в картинки (перед вставкой должен быть пробел - можно скопировать и вставить)...
ПРИМЕРЫ:

:-) улыбающийся :-D громко смеющийся :-))) смеющийся :-( Озадаченность или недовольство
:-|| Сердитый, разгневанный ;-) подмигивающий :-P показывающий язык :clap: браво, хлопать в ладоши
:arrow: Биться головой в стенку...

В комментариях вы можете использовать эти HTML Теги и атрибуты к вашему комментарию:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>