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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree