От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем о виджете Menu, который можно использовать для созданию меню на вашем сайте.
Меню — это неотъемлемый атрибут любого сайта. Сейчас уже сложно кого-то удивить каким бы то ни было меню, а раньше, помнится, созданием обычного выпадающего меню для сайта можно было похвастаться на форуме. Были и такие времена 🙂
Сегодня же для создания обычного выпадающего меню вам потребуется буквально десяток-другой строк кода CSS — и меню готово. Однако, если вам лень писать такой код и вы используете при этом библиотеку jQuery UI, тогда почему бы не обратиться к плагину Menu?
Начнем с разметки нашего меню. Если мы используем базовый вариант плагина, тогда разметка должна быть следующего вида:
1 2 3 4 5 6 7 8 9 10 11 |
<ul id="menu"> <li><div><a href="#">Books</a></div></li> <li><div><a href="#">Clothing</a></div></li> <li><div><a href="#">Electronics</a></div> <ul> <li><div><a href="#">Car Hifi</a></div></li> <li><div><a href="#">Utilities</a></div></li> </ul> </li> <li><div><a href="#">Movies</a></div></li> </ul> |
В результате мы получим следующую картину:
Осталось вызвать одноименный метод плагина — menu():
1 2 3 |
$(function(){ $('#menu').menu(); }); |
Ну и для того, чтобы меню не выходили за рамки разумного, проще говоря, имело приемлемую ширину, добавим одно единственное правило стилей с нужным значением ширины:
1 |
.ui-menu { width: 150px; } |
После этого меню в свернутом состоянии будет занимать указанную ширину в пикселях. Кстати, посмотрим, как оно выглядит в развернутом состоянии.
Неплохо. Кстати, а давайте попробуем убрать теги div внутри элементов списка li, в современных меню они просто лишние:
Меню немного поплыло, но проблема легко решается, просто сделаем тег ссылки блочным элементом и уберем подчеркивание:
1 2 3 4 |
.ui-menu a{ display: block; text-decoration: none; } |
Вот теперь все отлично, верстка меня устраивает и меню работает отлично. На этом сегодня все. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!