Красиве висувається меню

На даний момент за допомогою jQuery можна зробити на сайті все що завгодно, треба лише визначитися чи треба це вашому сайту. Ми всі прагнемо сделать сайт найбільш зручний для користувача, щоб йому було приємно переміщатися по сайту і це було максимально легко. Меню грає велику роль коли відвідувач «гуляє» по вашому сайту. І в цьому уроці ми створимо висувається меню, яке може ховатися і з`являтися разі необхідності користувачеві.

Також цікаві висуваються меню:

Анимированное висувається меню
Створення висувається меню

Приклад можна побачити тут:

Подивитися прімерСкачать

У цьому уроці ми будемо використовувати jQuery плагін - «jQuery.mmenu.js». Його можна завантажити за посиланням - завантажити.

Як користуватися?

HTML частина

Спершу підключимо необхідні бібліотеки та стилі:

lt;link type="Text / css" rel="Stylesheet" href="Css / jquery.mmenu.css" /gt;lt;link type="Text / css" rel="Stylesheet" href="Css / demo.css" /gt;lt;script type="Text / javascript" src="Http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.mmenu.js"gt; lt;/scriptgt;

Потім визначимось зі структурою меню. Для приклада, щоб показати як воно працює, я зроблю меню з вкладеними елементами. Але у вас воно може бути і більш просте:

Відео: Створюємо меню, що випадає на CSS

123456789101112131415161718192021222324252627

id="Menu"gt;lt;ulgt;lt;ligt; lt;a href="#"gt; Сторінка 1lt;/agt; lt;/ligt;lt;li class="Selected"gt;lt;a href="#"gt; Сторінка 2lt;/agt;lt;ulgt;lt;ligt; lt;a href="#"gt; Сторінка 10lt;/agt; lt;/ligt;lt;ligt;lt;a href="#"gt; Сторінка 11lt;/agt;lt;ulgt;lt;ligt; lt;a href="#"gt; Сторінка 13lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 14lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 15lt;/agt; lt;/ligt;lt;/ulgt;lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 12lt;/agt; lt;/ligt;lt;/ulgt;lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 3lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 4lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 5lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 6lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 7lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 8lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сторінка 9lt;/agt; lt;/ligt;lt;/ulgt;lt;/navgt;

Трохи вище меню вставимо перемикач, щоб користувач міг відкрити / закрити його:

1234	lt;div id="Header"gt;lt;a href="#menu"gt; lt;/agt; Сторінка з прикладом роботи даного плагінаlt;/divgt;

Відео: випадає меню css

З HTML структурою закінчили, зараз переходимо до стилів.

CSS частина

Ми вже підключили стилі для меню (вони знаходяться в «jquery.mmenu.css») і поставимо їх тільки для перемикача:

Відео: Як зробити своє меню на WordPress Меню, що випадає

12345678910111213

#header a{background: center center no-repeat transparent-background-image: url( data:image / png-base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi /P// PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC )-display: block-width: 40px-height: 40px-position: absolute-top: 0-left: 10px-}

jQuery частина

І залишилося найостанніше - все це змусити працювати:

lt;script type="Text / javascript"gt;$(function() {$(`Nav # menu`).mmenu()-})-scriptgt;

висновок

Мені дуже подобаються такі меню, але, на жаль, до мого дизайну вони не підходять. Сподіваюся вам сподобалося дане меню і ви знайдете йому належне застосування. Одне з плюсів такого меню є те, що воно не займає місце на сайті, а значить це ж місце можна використовувати для чого-небудь іншого.

Відео: Уроки по Bootstrap 3 | # 5 Положення меню і меню, що випадає

Успіхів!

Поділися в соц мережах: