Библиотека jQuery UI. Виджет Menu

Библиотека jQuery UI. Виджет Menu

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем о виджете Menu, который можно использовать для созданию меню на вашем сайте.

Меню — это неотъемлемый атрибут любого сайта. Сейчас уже сложно кого-то удивить каким бы то ни было меню, а раньше, помнится, созданием обычного выпадающего меню для сайта можно было похвастаться на форуме. Были и такие времена 🙂

Сегодня же для создания обычного выпадающего меню вам потребуется буквально десяток-другой строк кода CSS — и меню готово. Однако, если вам лень писать такой код и вы используете при этом библиотеку jQuery UI, тогда почему бы не обратиться к плагину Menu?

Начнем с разметки нашего меню. Если мы используем базовый вариант плагина, тогда разметка должна быть следующего вида:

В результате мы получим следующую картину:

Библиотека jQuery UI. Виджет Menu

Осталось вызвать одноименный метод плагина — menu():

Библиотека jQuery UI. Виджет Menu

Ну и для того, чтобы меню не выходили за рамки разумного, проще говоря, имело приемлемую ширину, добавим одно единственное правило стилей с нужным значением ширины:

После этого меню в свернутом состоянии будет занимать указанную ширину в пикселях. Кстати, посмотрим, как оно выглядит в развернутом состоянии.

Библиотека jQuery UI. Виджет Menu

Неплохо. Кстати, а давайте попробуем убрать теги div внутри элементов списка li, в современных меню они просто лишние:

Библиотека jQuery UI. Виджет Menu

Меню немного поплыло, но проблема легко решается, просто сделаем тег ссылки блочным элементом и уберем подчеркивание:

Вот теперь все отлично, верстка меня устраивает и меню работает отлично. На этом сегодня все. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Метки:

Похожие статьи:

Комментарии Вконтакте: