У цій статті ми будемо розробляти простеньке випадаюче меню за допомогою jQuery. Для початку подивіться на демо-файл. Сподіваємося, що ви хоч трохи знаєте основи jQuery і CSS. Ключовими аспектами створення даного меню, що випадає полягають в застосуванні параметрів CSS: position, top, left, z-index.
Використовуючи ці параметри, ми можемо бути впевнені в тому, що наше меню буде з'являтися точно під посиланням, на яку був наведений курсор, і точно буде накривати всі інші елементи. Ми також зробимо так, щоб меню відображалося при наведенні курсору, і зникало тоді, коли курсор відведено в сторону. Для реалізації даних подій, ми будемо використовувати функції jQuery: mouseenter і mouseleave. І це все, що нам знадобиться для створення меню, що випадає!
Демо-файл фінального результату і посилання на скачування
HTML-код
Ознайомтеся з HTML-кодом меню, що випадає:
Як видно, тут ми будемо використовувати невпорядковані списки для реалізації пунктів меню. Кожній посиланням меню присвоєно клас меню, що випадає, а саме меню, що випадає охоплено класом суб-посилань. Імена класів будуть використовуватися jQuery для того, щоб визначати, яке меню потрібно відображати.
CSS-код
Ознайомтеся з кодом CSS:
/ * CSS For Dropdown Menu Start * /
ul
{
list-style: none;
padding: 0px;
margin: 0px
}
ul li
{
display: inline;
float: left;
}
ul li a
{
color: #ffffff;
background: # 990E00;
margin-right: 5px;
font-weight: bold;
font-size: 12px;
font-family: verdana;
text-decoration: none;
display: block;
width: 100px;
height: 25px;
line-height: 25px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px solid # 560E00;
}
ul li a: hover
{
color: #cccccc;
background: # 560E00;
font-weight: bold;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px solid # 000000;
}
ul li.sublinks a
{
color: # 000000;
background: # f6f6f6;
border-bottom: 1px solid #cccccc;
font-weight: normal;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
margin-top: 2px;
}
ul li.sublinks a: hover
{
color: # 000000;
background: # FFEFC6;
font-weight: normal;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
}
ul li.sublinks
{
display: none;
}
/ * CSS For Dropdown Menu End * /
Велика частина коду CSS використовується для форматування меню (ви можете надати зовнішній вигляд меню на власний розсуд), але тут також є деякі важливі моменти:
1 - Видалення знаків табуляції за допомогою list-style: none;
2 - Нам відомо, що списки - це блокові елементи і ви бачитиме в вертикальному порядку. Для того, щоб зробити розташувати їх горизонтально, ми надаємо їм параметр малих елементів і вирівнюємо їх по лівій стороні за допомогою коду:
Display: inline;
float: left;
3
- За замовчуванням посилання є малими елементами. Ми ж переробляємо їх в блокові елементи за допомогою display: block (таким чином, ми тепер можемо поставити їм значення ширини).
4 - Ховаємо все меню за допомогою:
Ul li.sublinks
{
display: none;
}
jQuery
Уявіть минулі часи, коли випадають меню були реалізовані за допомогою грубого коду javascript, до того ж там була потрібна купа непотрібного коду. Але сьогодні все, що нам потрібно, це jQuery:
$ (Function () (
Submenu.css ((
position: "absolute",
zIndex 1000
});
Submenu.stop (). SlideDown (300);
$ (This) .slideUp (300);
});
});
});
Дуже цікава і проста штука. Давайте ми вам пояснимо, як це працює. Для початку і як зазвичай, ми охоплюємо наш код в контролер jQuery:
$ (Function () (
...
});
Наш код активізується, коли курсор миші буде наведено (функція mouseenter) на елемент, якому присвоєно клас меню, що випадає ($ ( ". Dropdown")). У нашому випадку це посилання в меню:
$ (Function () (
$ ( ". Dropdown"). Mouseenter (function () (
........
});
});
Давайте переконаємося, що ми сховали (hide ()) всі попередні відкриті меню до того, як курсор миші перескочить на наступне посилання:
$ ( ". Sublinks"). Stop (false, true) .hide ();
Зверніть увагу на функцію зупинки, яка допомагає нам відобразити тільки одне меню, що випадає в момент, коли курсор миші переходить за різними посиланнями в меню. Якщо ми не скористаємося цією функцією, то кожне меню, що випадає так і залишиться відкритим аж до того моменту, поки ми повністю не відведемо курсор миші з меню. Це створюватиме деякі накладки, тому нам слід уникати цього. Далі ми беремо поточний розкрите меню, що випадає і призначаємо змінну:
Var submenu \u003d $ (this) .parent (). Next ();
Ось що буде в коді HTML:
Коли курсор миші наведений на посилання з класом dropdown, ми рухаємося назад за допомогою parent () і зупиняємося на "li", а далі за допомогою next (), ми опиняємося на потрібному випадаючому меню, а "li" вже буде з класом суб посилань (sublinks). Таким чином, jQuery полегшує нам процес пошуку того, яке меню, що випадає відображати, коли курсор миші наведений на певну посилання.
Submenu.css ((
position: "absolute",
top: $ (this) .offset (). top + $ (this) .height () + "px",
left: $ (this) .offset (). left + "px",
zIndex 1000
});
Код дуже важливий, так як він гарантує нам те, що меню, що випадає відображається точно під певною посиланням. Якщо позиція виставлена \u200b\u200bна absolute, ми можемо позиціонувати елемент в будь-якій області нашої сторінки. Далі ми визначаємо верхню позицію посилання, на яку наведений курсор за допомогою $ (this) .offset (). Top (це відноситься до поточного пункту меню, на який наведено курсор), і додаємо до нього таке значення height, щоб меню відображалося точно під посиланням. Щось схоже проробляємо і з параметром left. Потім ми використовуємо z-index для того, щоб бути впевненими, що наше меню буде відображено поверх інших елементів.
Submenu.stop (). SlideDown (300);
Звичайно, ви можете використовувати і інші варіанти анімації типу fadeIn, анімацію за допомогою власних стилів і так далі.
Тепер потрібно відволіктися від концепції відображення меню, що випадає, і змусити його ховатися. Нам буде потрібно ось такий уривок коду:
Submenu.mouseleave (function () (
$ (This) .slideUp (300);
});
Для того щоб заховати меню, що випадає, ми використовуємо slideUp, антонім до slideDown. Зважайте на те, що submenu - це змінна, яку ми створили для визначення конкретного меню, що випадає.
Таким чином, у нас вийшло привабливе однорівневе випадає меню на jQuery.
В даний час jQuery меню навігації це більше, ніж просто блоки тексту з посиланнями в них. В я розповів, як за допомогою JQuery і CSS3 ви можете створити меню навігації, яке буде виглядати дуже круто.
За допомогою можливостей JQuery ми можемо перетворити меню навігації в динамічне меню. Хоча зараз для створення динамічної навігації можна використовувати тільки CSS3, JQuery робить меню ще більш функціональним.
Крім динамічних функцій, дизайн також грає важливу роль. Хоча б тому, що це те, що відвідувачі бачать в першу чергу, коли заходять на ваш сайт.
Якщо меню буде скромним, це дасть користувачам поганий досвід взаємодії. Хороший дизайн меню в свою чергу збільшить якість вашого сайту, і дасть кращий досвід взаємодії користувачів.
Сьогодні я представляю вам 30 відмінних прикладів JQuery меню навігації.
1. Pushy
Pushy адаптивне, не прив'язане до полотна меню навігації, що використовує перетворення і переходи CSS. Воно відмінно працює на мобільних пристроях. Обов'язково подивіться демо, і воно безумовно вам сподобається.
демо | завантажити
2. Slinky
Це ще одна відмінна JQuery-меню для створення красивих прокручуваних списків навігації. Його відмінною рисою є малий розмір вихідних файлів.
демо | завантажити
3. jQuery Pop Menu
Це просте адаптивне спливаюче меню з дуже цікавими функціями. При натисканні на іконку меню, спливає вікно меню з іконками елементів. Подивіться демо.
демо | завантажити
4. Slidebars
Slidebars - JQuery фреймворк для швидкої і простий реалізації стилів додатки без прив'язки до полотна. Slidebars також обробляє зміни орієнтації і зміна розмірів.
демо | завантажити
5. jQuery Square Menu
JQuery меню, яке виводить квадратне анімоване меню сайту за допомогою JQuery і CSS3. Переконайтеся в цьому, подивившись демо.
демо | завантажити
6. Perspective Page View Navigation
Це jQuery меню навігації перетворює сторінку в 3D меню. Ідея полягає в тому, щоб створити дизайн мобільного додатка, в якому при кліці по іконці меню, вміст сторінки зсувається в бік, а меню виводиться на передній план.
демо | завантажити
7. SlickNav
Плагін для створення адаптивного мобільного jQuery меню з декількома рівнями і гнучкою, але простими налаштуваннями. Сумісний з різними браузерами, можлива навігація за допомогою клавіатури.
демо | завантажити
8. Mmenu
jQuery меню для додатків з прив'язкою і без прив'язки до полотна з спливаючими підпунктами. Завдяки численним опціях, адд-Онам і розширенням, можлива дуже гнучке налаштування меню.
демо | завантажити
9. Sidr
jQuery плагін для створення меню і простого додавання адаптивних функцій. За допомогою Sidr ви зможете створювати різні елементи свого сайту, а також адаптивні меню.
демо | завантажити
10. slimMenu
slimMenu - це невеликий jQuery плагін, який допоможе вам у розробці адаптивних, багаторівневих меню навігації. Що саме класне в ньому, так це те, що ви можете мати кілька різних меню, і всі вони будуть абсолютно адаптивні.
демо | завантажити
11. HorizontalNav
jQuery меню навігації, що дозволяє задати горизонтальне меню по всій ширині контейнера. За допомогою цього плагіна це робиться дуже просто. Крім того можна реалізувати підтримку для IE7.
демо | завантажити
12. FlexNav
Це mobile-first приклад використання медіа запитів і JavaScript для створення відмінного багаторівневого меню з підтримкою сенсорних екранів, ефектів наведення і навігації за допомогою клавіатури.
демо | завантажити
13. jQuery Menu-Aim
jQuery меню, яке запускає події при наведенні курсору миші на випадає елемент меню. Ідеально підходить для створення адаптивних випадають меню, як на Amazon.
демо | завантажити
14. SmartMenus
Плагін jQuery меню, який пропонує простий і інтуїтивний спосіб виведення меню. Створює адаптивні списки меню. Працює на всіх пристроях!
демо | завантажити
15. Shifter
Shifter - простий у використанні mobile-first jQuery плагін для створення слайд-меню, що виїжджають з правого боку при натисканні на кнопку перемикання. Для настройки існує тільки одна опція maxWidth. Вона дозволяє налаштувати дозвіл / орієнтацію для мобільних пристроїв.
демо | завантажити
16. Hamburger
Hamburger - це jQuery плагін для створення слайд-меню в стилі Android App, в якому по правому краю екрану розміщується спливаюче меню. При розкритті меню в повному розмірі, воно перекриває область контенту, але не панель дій.
демо | завантажити
17. Focucss
Focucss - jQuery меню навігації, за допомогою якого створюється не прив'язане до полотна меню в сайдбарі з крутими функціями розмитості, за допомогою яких ви можете звернути увагу користувачів на основні розділи сайту і зробити менш помітними не дуже корисні розділи.
демо | завантажити
18. Drawer
Drawer - jQuery плагін для створення адаптивного, анімованого меню, що виїжджає при натисканні з бічної області екрану. Подібні функції ви могли бачити в Android-додаток.
демо | завантажити
19. Datmenu
Datmenu - преміум jQuery адаптивне меню з різними функціями CSS3 анімації. Що саме чудове в цьому плагіні, так це можливість повної настройки за допомогою js -Опції.
демо | завантажити
20. jPanelMenu
jPanelMenu - красиве і сучасне jQuery меню, що дозволяє створювати панельне меню навігації з функціями переходів CSS3 анімації. Стиль jPanelMenu нагадує мобільні версії Facebook і Google. Плагін може використовуватися для різноманітних мобільних додатків.
демо | завантажити
21. Fly Side Menu
Fly Side Menu - крутий плагін меню навігації, який використовує CSS3 для створення бічного меню з 3D перетвореннями і переходами.
демо | завантажити
22. PageScroll jQuery Menu Plugin
PageScroll - настроюється мобільне jQuery-меню, рекомендоване для використання на будь-яких веб-сайтах, а також цільових сторінках.
демо | завантажити
23. DD Icon Menu
DD Icon Menu - це jQuery плагін, який дозволяє створювати вертикальне меню іконок, розташоване на краю екрану з розгортаються при наведенні підпунктами меню.
демо | завантажити
24. JQuery Mobile Date Navigation
jQuery меню, що дозволяє здійснювати навігацію по датам в обраному діапазоні ( тиждень, місяць або рік). Ідеально для запитів інформації за допомогою викликів AJAX.
демо | завантажити
25. Navobile
jQuery плагін меню навігації, що дозволяє дуже просто створювати мобільні меню. Використовує CSS переходи для установки позиції меню на мобільних пристроях.
Так само кому цікаво, можете подивитися на попередній спосіб за допомогою CSS, який описаний в статті -
Тепер до справи. Як і в минулій статті, в першу чергу, давайте напишемо HTML код нашого меню. Код такойже як і в тій статті, щоб не було плутанини і було більш зрозумілим. Меню з двома пунктами і обидва мають підміню.
Якщо у Вас є такий рядок або схожа, яка вже раніше підключила бібліотеку, то знову робити цього не варто.
У другому рядку скрипта вказуємо айди нашого меню. Якщо Ви застосовуєте даний спосіб на свій власний меню, то природно міняйте ім'я на своє. В даному випадки це - #slow_nav.
Ще можете налаштувати час анімації. В даному скрипті на відкривання і закривання варто значення 400 мілісекунд, це 0,4 секунди. Якщо хочете можете змінити на більше значення або на меншу.
Останній крок, додавання стилів. Вони дуже схожі зі стилями з минулої статті, тільки в них відсутні властивості CSS анімації.
#slow_nav\u003e ul (width: 500px; margin: 25px auto 0;) #slow_nav\u003e ul\u003e li (list-style: none; display: inline-block; position: relative; padding: 0;) #slow_nav a (text- decoration: none;) #slow_nav\u003e ul\u003e li\u003e a (font-size: 18px; padding: 5px; background-color: # 333; color: #fff;) #slow_nav li ul (position: absolute; list-style: none; text-align: center; top: 15px; font-size: 15px; left: 0; margin: 0; padding: 0; display: none;) #slow_nav li ul li (background-color: # 333; border- bottom: 1px solid # 888;) #slow_nav li ul li: last-child (border-bottom: none;) #slow_nav li ul li a (padding: 5px 12px; color: #fff; display: block;) #slow_nav li ul li: hover (background-color: # 444;) #slow_nav li ul li: first-child (margin-top: 25px; position: relative;) #slow_nav li ul li: first-child: before (content: "" ; position: absolute; width: 1px; height: 1px; border: 5px solid transparent; border-bottom-color: # 333; left: 10px; top: -10px;)
Також до стилів додана одна нова рядок, за допомогою якої скрипт правильно працює. Для елемента - #slow_nav li ul задано властивість display: none;. Якщо його не додати, то меню, що випадає буде спочатку видно і зникне лише після проведення по ньому курсором. Всі інші ж стилі як попередній статті.
Як і минулого спосіб, так і цей можна застосовувати не тільки до самопісний меню а й до тих же динамічним меню, які створюються системами управління сайтом, наприклад WordPress. Для цього потрібно небагато підправити стилі і все. Тобто перший HTML код використовувати не потрібно, тільки стилі. У стилях потрібно замінити ім'я айди #slow_nav на те що буде у Вас, ну і можливо підправити ще щось по дрібницях. Докладно зупинятися не буду. Для кожного випадку потрібен персональний підхід, так що вже вибачайте 🙂
На цьому все, спасибі за увагу. 🙂
Для того, щоб самому написати навігацію у вигляді вертикального меню, що випадає на jQuery з списком, що випадає підкатегорій, необхідно зрозуміти сам принцип роботи цього механізму. Але для початку розберемо структуру навігації:
Navigation
Як ви вже здогадалися, наше меню, що випадає побудовано на базі маркованих списків. При наведенні курсора миші на тег
- test 1
- test 2
- test 3
- test 4
Але як, запитаєте ви? Так все насправді дуже просто. Для початку давайте розберемося з таблицею стилів нашого списку навігації, виглядати вона буде наступним чином:
Body (background: rgb (244, 244, 244); font-family: Verdana; font-weight: 100;) / * --- Навігація --- * / #menu (width: 200px; margin: 0; padding: 2px;) #menu li (list-style-type: none;) .menu (position: relative; background: chocolate; background: -moz-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3) ; background: -webkit-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); background: -o-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); border : 1px solid # 2AC4B3;) .menu: hover (background: # 00c; background: -moz-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB); background: -webkit-linear-gradient ( top, rgb (230, 230, 230), # 0CBFAB); background: -o-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB);) .menu span (width: 11px; height: 11px; display: block; position: absolute; top: 8px; right: 10px; cursor: pointer;) .menu ul (width: 150px; margin: 0; padding: 1px; position: absolute; top: -1px; left: 198px;) .menu ul li (background: chocolate; background: -moz-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); background: -webkit-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); background: -o-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); border: 1px solid #fff; ) .Menu ul li: hover (background: # 00c; background: -moz-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB); background: -webkit-linear-gradient (top, rgb ( 230, 230, 230), # 0CBFAB); background: -o-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB);) .menu a (padding: 5px; display: block; text- decoration: none; color: white;) .menu a: hover (color: white;) / * --- END --- * /
З таблиці стилів видно, що спочатку випадає списку не прихований, але цей момент ми і будемо виправляти за допомогою:
$ (Document) .ready (function () ($ ( ". Menu ul"). Hide (); $ ( ". Menu span"). Css ( "background", "url (" down.png ")") ; $ ( "# menu li"). hover (function () ($ (this) .children ( "ul"). show (); / * Еквівалент $ ( "ul", this) .show (); * / $ (this) .find ( "span"). css ( "background", "url (" right.png ")"); / * Еквівалент $ ( "span", this) .css ( "background", "url ( "right.png") "); * /), function () ($ (this) .children (" ul "). hide (); / * Еквівалент $ (" ul ", this) .hide (); * / $ (this) .find ( "span"). css ( "background", "url (" down.png ")"); / * $ ( "span", this) .css ( "background", " url ( "down.png") "); * /))))
Тепер детально розберемо jQuery код меню, що випадає, тому що можливо комусь він буде не зовсім зрозумілий. На самому початку прописана наступна конструкція:
$ (Document) .ready (function () ())
У ній прописуються команди, які необхідно виконувати після повного завантаження сторінки. Зроблено це для того, щоб не з'являлися різного роду помилки, при неможливості знайти який-небудь об'єкт через те, що він банально ще не завантажився.
$ ( ". Menu ul"). Hide ();
Що означає цей запис? Конструкція «$ ()» дозволяє здійснити вибірку елементів. Отже на самому початку нам необхідно приховати наш список, що випадає. Ми беремо конструкцію «$ ()» і пишемо в ній цікавить нас об'єкт. У нашому випадку цим об'єктом буде маркований список з класом «menu». Далі прописуємо метод «hide ()», що дозволяє приховати цікавий для нас об'єкт.
$ ( ". Menu span"). Css ( "background", "url (" down.png ")");
Що вона робить? Вона шукає тег батьківського елементу якого присвоєно клас «menu» і, за допомогою методу "css (" background "," url ( "down.png") ")", відбувається присвоювання властивості стилю «background» значення «url (" down. png ")». "down.png" - це ікона, що показує, що список може розкриватися.
Потім йде конструкція, яка і буде розкривати наш список, виглядає вона таким чином:
$ ( "# Menu li"). Hover (function () ($ (this) .children ( "ul"). Show (); $ (this) .find ( "span"). Css ( "background", " url ( "right.png") ");), function () ($ (this) .children (" ul "). hide (); $ (this) .find (" span "). css (" background " , "url (" down.png ")");)
Ми шукаємо тег батьківського елементу якого присвоєно id \u003d "menu". Далі йде метод "hover" і в дужках дві функції. Перша функція буде виконуватися при наведенні курсору миші, а друга виконатися, якщо курсор миші покине цікавий для нас елемент.
У першій функції прописано:
$ (This) .children ( "ul"). Show (); $ (This) .find ( "span"). Css ( "background", "url (" right.png ")");
Конструкція "$ (this)" означає, що нас цікавить той елемент, на який ми в даний момент навели (this від англ. Цей). А навели ми на тег
Після цього у тега ми шукаємо нащадків, а саме: тег і у нього міняємо фон на іншу іконку.
Після цього прописана функція, яка робить все, як було спочатку, після того, як курсор миші покине елемент списку:
Function () ($ (this) .children ( "ul"). Hide (); $ (this) .find ( «span»). Css ( "background", "url (" down.png ")"); )
Щоб написаний код на jQuery заробив і наше меню, що випадає працювало коректно, необхідно завантажити з сайту jquery.com бібліотеку і підключити її, прописавши після відкриваючого тега
рядок.Ну от і все! У висновку хочу відзначити, що якщо ваш сайт досить важкий, то можливо, скрипт буде запускатися занадто пізно (сайт буде довго грузиться) і користувачі будуть бачити, як спочатку розкривається повністю, а тільки потім ховається, що, погодьтеся, дуже некрасиво. Отже, необхідно винести все jQuery команди за цю конструкцію: «$ (document) .ready (function () ())». Виглядати це буде наступним чином:
$ (Document) .ready (function () ()) $ ( ". Menu ul"). Hide (); $ ( ". Menu span"). Css ( "background", "url (" down.png ")"); $ ( "# Menu li"). Hover (function () ($ (this) .children ( "ul"). Show (); $ (this) .find ( «span»). Css ( "background", " url ( "right.png") ");), function () ($ (this) .children (" ul "). hide (); $ (this) .find (« span »). css (" background " , "url (" down.png ")");))
Підключення нашого скрипта необхідно перенести з тега
в самий кінець, перед закриває тегом, Або можна підключити скрипт відразу після маркованого списку.(Cкачиваний: 314)
За допомогою JQuery- класика, статей на цю тему написано маса. Я ж спробував трохи ускладнити завдання, додавши можливість залишатися розділах меню відкритими (або закритими, в залежності від вибору користувача) при переміщенні по сайту.
Для вирішення цього завдання я вирішив скористатися плагіном JQuery Cookie. Перевага даного плагіна в тому, що операція здійснюється на стороні клієнта, що, в свою чергу, зменшує навантаження на сервер. Мінус якщо у користувача відключений JS, плагін не спрацює. Але даний варіант я не розглядаю, так як тоді пропадає взагалі весь сенс меню, що випадає. Тож почнемо.
Для початку нам необхідно підключити сам фреймворк JQuery і плагін JQuery Cookie:
Код: HTML
Далі-розмітка. Виглядати вона буде як простий список, нічого надприродного. Єдине зауважу, що в тезі
повинен знаходиться заголовок, при кліці на який буде випадати меню:
Код: HTML
Ну і так до нескінченності. Тепер-найцікавіше. У коді додам трохи коментарів, щоб було приблизно зрозуміло, чопачом
Код: JS
$ (Document) .ready (function () (
if ($. cookie ( "num_open_ul")) (// перевірили, чи є запис в печеньки
if ($. cookie ( "num_open_ul")! \u003d 0) (// і цей запис не дорівнює 0
var number_eq \u003d parseInt ($. cookie ( "num_open_ul") - 1);
$ ( ". Navigation_body"). Eq (number_eq) .show (). PrevAll ( "# navigation h2.navigation_head: first"). AddClass ( "active_navigation");
}
};
$ ( "# Navigation h2.navigation_head"). Click (function () (// при кліці спрацює ця функція
if (! $ (this) .next (). is ( ": visible")) (
$ ( "Div.navigation_body"). Siblings ( "div.navigation_body"). SlideUp (500); // якщо інші открити- закрили всі, крім поточного
}
$ (This) .next ( "div.navigation_body"). SlideToggle (500) .siblings ( "div.navigation_body"). SlideUp (500);
$ (This) .toggleClass ( "active_navigation"). Siblings ( "# navigation h2.navigation_head"). RemoveClass ( "active_navigation"); // відкритого додали клас, щоб змінити стиль
setTimeout (fncookie, 600); // сама запис в печеньки з затримкою, щоб скрипт до запису встиг завершити роботу (500мс- швидкість, задержка- 600мс)
});
function fncookie () (// сама функція запису
var number_open_ul \u003d 0;
var i \u003d 0;
$ ( "Div.navigation_body"). Each (function () (
i ++;
if ($ (this) .is ( ": visible")) (
number_open_ul \u003d i;
}
$ .Cookie ( "num_open_ul", number_open_ul, (expires: 3, path: "/")); // зберігати 3 дні для всього сайту.
});
}
});
Тобто тепер, якщо користувач відкрив меню, пішов з сайту і зайшов на нього знову через пару днів, меню все так же для нього буде залишатися відкритим.
Ну і наостанок у нас залишився невеликий штрих: власне, css- стилі. Ви вже робіть на свій смак, в прикладі я взяв готовий дизайн з одного з проектів
Код: CSS
#navigation (
margin: 80px auto;
width: 250px;
}
#navigation h2, #navigation h2.navigation_head (
font-size: 18px;
font-weight: bolder;
background-color: # ffb6c1;
background-image: -webkit-gradient (linear, 50% 0,50% 100%, color-stop (0%, # ffe9e9), color-stop (100%, # ffb6c1));
background-image: -webkit-linear-gradient (# ffe9e9, # ffb6c1);
background-image: -moz-linear-gradient (# ffe9e9, # ffb6c1);
background-image: -o-linear-gradient (# ffe9e9, # ffb6c1);
background-image: linear-gradient (# ffe9e9, # ffb6c1);
padding: 5px 3px 6px 3px;
margin: auto;
position: relative;
}
#navigation h2.navigation_head: after (
position: absolute;
right: 5px;
color: # 550000;
content: "cssb";
}
#navigation h2: hover, #navigation h2.navigation_head: hover (
cursor: pointer;
}
.active_navigation (
background-image: -webkit-gradient (linear, 50% 0,50% 100%, color-stop (0%, # ffb6c1), color-stop (100%, # ffe9e9))! important;
background-image: -webkit-linear-gradient (# ffb6c1, # ffe9e9)! important;
background-image: -moz-linear-gradient (# ffb6c1, # ffe9e9)! important;
background-image: -o-linear-gradient (# ffb6c1, # ffe9e9)! important;
background-image: linear-gradient (# ffb6c1, # ffe9e9)! important;
}
.active_navigation: after (
position: absolute;
right: 5px;
content: "cssd"! important;
}
.navigation_body (
display: none;
}
#navigation ul (
margin: 0;
padding: 0;
list-style-type: none;
}
* Html #navigation ul li (
height: 1%;
}
#navigation div.navigation_body ul li (
margin-left: 10px;
}
#navigation a (
font-family: "Times New Roman";
display: block;
color: # 918871;
padding: 3px;
background-color: # ffe3e0;
border-bottom: 1px solid #fff;
text-decoration: none;
}
#navigation a: hover (
color: # 585858;
background-color: # ffb6cc;
}
Якщо хто звернув увагу, тут я спробував використовувати властивість content: +/- при закритому / відкритому меню, але ви можете додати зображення або будь-яку іншу конструкцію. Подивитися приклад того, що у нас вийшло, можна тут
Як завжди, готовий вислухати питання і спробувати відповісти на них. Всього доброго, всіх благ.