Библиотека 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 вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по 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