jQuery: плагин для создания адаптивного меню

Приветствую всех!

Хочу поделиться небольшим плагинчиком для библиотеки jQuery. И, естественно, услышать ваше мнение о нём 😉

Плагин предназначен для создания несложных адаптивных меню и позволяет сэкономить место на устройствах с небольшими экранами. Экономия заключается в том, что если ширина страницы меньше заданной величины, то при формировании страницы вместо меню будет показана ссылка с каким-нибудь текстом вроде «Развернуть меню». После клика по этой ссылке меню примет свой первоначальный вид.

Скачать плагин можно на GitHub.

Source

Также я сделал небольшую демонстрационную страничку.

Demo

Принцип работы

Допустим, у вас на странице есть разметка, которая создаёт меню. Что-нибудь вроде:

<nav>
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
	</ul>
</nav>

Для того, чтобы сделать такое меню адаптивным, вам нужно будет сделать 2 операции:

1) Выполнить JS код:

$('nav>ul').adaptiveMenu();

2) Добавить CSS стиль:

.hidden {
	display: none;
}

Этого достаточно для того, чтобы меню начало работать.

При формировании страницы плагин проверит её ширину и если она меньше 481px, добавит ссылку с текстом «Show menu», а для меню установит класс hidden. В результате меню исчезнет со страницы, а ссылка появится. Клик по ссылке убирает класс hidden у меню и устанавливает его самой ссылке. Таким образом, меню снова становится видимым.

Настройка плагина

Естественно в плагине предусмотрено несколько параметров для того, чтобы его можно было «подогнать» под дизайн конкретного сайта.

width – ширина в px, если текущая ширина страницы меньше этого значения, то меню будет заменено ссылкой (по-умолчанию, 481px).

text – текст ссылки (по-умолчанию, «Show menu»).

openMenuLinkClass – CSS класс, который устанавливается для ссылки (по-умолчанию, adaptiveMenuTrigger). Этот параметр предназначен для изменения внешнего вида ссылки.

Установить параметры можно следующим образом.

$('nav>ul').adaptiveMenu({
	'width': 481,
	'text': 'Show menu',
	'openMenuLinkClass': 'adaptiveMenuTrigger'
});

Также есть два метода, которые позволяют скрывать и показывать меню с помощью JS кода.

Называются они довольно просто show и hide. Соответственно, первый показывает меню, а второй – прячет.

Использовать методы можно так:

$('nav>ul').adaptiveMenu({'show'});

$('nav>ul').adaptiveMenu({'hide'});

В общем, надеюсь, кому-нибудь этот плагин будет полезен. И конечно мне будет интересно услышать замечания и предложения по доработке плагина. И ещё лучше будет получить полезный pull request 🙂

Интересно почитать

Онлайн школа программирования