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

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

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

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

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

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

<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>

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

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

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

$(function(){
	$('#menu').menu();
});

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

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

.ui-menu { width: 150px; }

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

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

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

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

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

.ui-menu a{
	display: block;
	text-decoration: none;
}

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

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree