Просте і ефектне меню, що випадає на jQuery і CSS3. JQuery: меню, що випадає з використанням cookie Випадне меню пов'язані css jquery

У цій статті ми розроблятимемо простеньке випадаюче менюза допомогою 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 = $(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
});

Код дуже важливий, тому що він гарантує нам те, що меню, що випадає, відображається точно під певним посиланням. Якщо позицію виставлено на 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 - преміум 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 переходи для встановлення позиції меню на мобільних пристроях.

У цьому уроці ми покажемо вам, як створювати бічне меню, що випадає, для ще більш простої навігації по сайту. Таке меню – популярна тенденція у сучасному веб-дизайні. На багатьох веб-сайтах використовується цей тип меню. З його допомогою можна позбутися хаосу на сторінках проекту, зробити його більш читаним, зосереджуючи увагу користувачів на основному контенті.

Це чудовий спосіб досягти мінімалізму без відволікаючих факторів. Сьогодні створимо таке меню самостійно.

Щоб створити меню навігації, давайте спочатку ознайомимося з налаштуваннями:

Для початку необхідно завантажити Normalize.css і настроїти стилі браузера за промовчанням, переконатися, що меню виглядає однаково у всіх браузерах. Для відображення стрілки перед елементами меню з підпунктами будемо використовувати FontAwesome. Для перемикання класів в меню завантажуємо jQuery і переміщуємо весь jQuery код користувача в script.js. Останнє посилання є основною таблицею для веб-проекту.

Гамбургер значок

Гамбургер значок є загальним атрибутом навігації по сайту. Часто вона створюється за допомогою шрифту іконки, такого як FontAwesome, але в цьому уроці ми додамо деяку анімацію, а тому будемо створювати її з нуля. Наша іконка-гамбургер є тег span, що містить три div класи, що відображається у вигляді горизонтальних смуг.

Стилі виглядають так:

Toggle-button ( position: fixed; width: 44px; height: 40px; padding: 4px; transition: .25s; z-index: 15; ) .toggle-button:hover ( cursor: pointer; ) .toggle-button .menu -bar ( position: absolute; border-radius: 2px; width: 80%; transition: .5s; ) .toggle-button .menu-bar-top ( border: 4px solid #555; border-bottom: none; top: 0; ) .toggle-button .menu-bar-middle ( height: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; -bottom ( border: 4px solid #555; border-top: none; top: 22px; ) .button-open .menu-bar-top ( transform: rotate(45deg) translate(8px, 8px); transition: .5s; ) .button-open .menu-bar-middle ( transform: translate(230px); translate(8px, -7px); transition: .5s;

Іконка має фіксоване положення та не змінює його при прокручуванні сторінки. Також має z-index 15, а це означає, що вона завжди буде поверх інших елементів. Складається з трьох барів, кожен з яких поділяє інші стилі. Тому ми перемістимо кожен bar до класу.menu-bar. Інші стилі переміщаємо в окремі класи. Магія відбувається тоді, коли ми додаємо інший клас у тег span, який є відкритим. Ми додаємо його за допомогою jQuery наступним чином:

$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open") ); ) ); ) );

Для тих, хто не знайомий з jQuery - ми ініціалізуємо змінну з $toggleButton, яка містить нашу іконку. Зберігаємо її у змінній без необхідності використання JavaScript. Потім ми створюємо event listener, який враховує кліки по іконці. Щоразу, коли користувач кликає по іконці-гамбургеру, event listener запускає функцію toggleClass() , яка перемикає button-open.

Коли додано клас.button-open, ми можемо використовувати його для зміни способів відображення елементів. Ми використовуємо CSS3 translate() та rotate() функції, щоб верхня та нижня смуги оберталися на 45 градусів, а середня смуга зрушувалася вправо та зникала. Ось яку анімацію можна налаштувати:

Меню навігації, що випадає

Тепер, коли у вас є іконка-гамбургер, давайте зробимо її корисною і створимо меню, що випадає при натисканні на неї. Ось як виглядає розмітка меню:

Зараз не будемо докладно зупинятися на кожному стилі для цього меню, натомість зосередимося на кількох важливих моментах. Насамперед, це div і клас.menu-wrap. Подивіться на його стилі:

Menu-wrap ( background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto transition: .25s; z-index: 10;

Положення фіксоване, тому при прокручуванні сторінки меню завжди залишається в одному положенні. Висота 100% дозволяє меню займати весь вертикальний простір на сторінці. Зверніть увагу, що в полі margin-left встановлено від'ємне число, що дорівнює ширині меню. Це означає, що меню зникатиме з вікна перегляду. Щоб зробити його знову видимим, ми створюємо інший клас toggler з jQuery. Наш файл JavaScript буде виглядати так:

$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); ) ); ) );

Додаємо іншу змінну $menuWrap, яка містить оболонку меню. Використовуйте той самий обробник подій, який ми створили раніше. Тільки цього разу перемикаємо два класи: один для кнопки та один для оболонки меню. Значення лівого поля класу.menu-show дорівнює 0, це додасть ефекту тіні.

Menu-show ( margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; )

Підменю та посилання

Ви можете помітити, що в одному з елементів списку є клас.menu-item-has-children, який містить підменю. Крім того, одразу під посиланням розміщено тег span із класом.sidebar-menu-arrow.

span має::after pseudo-element і містить стрілку FontAwesome. За замовчуванням підменю приховано і буде видно лише при натисканні на стрілку. Ось як ми це можемо зробити з jQuery:

$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300)); ) ); ) );

Коли ми натискаємо на стрілку, ми викликаємо функцію, яка у свою чергу націлена на наступний елемент одразу після span (у нашому випадку це підменю) і робить його видимим. Функцію, яку ми використовуємо - slideToggle. Вона змушує елемент з'являтися та зникати. Функція у нашому прикладі має один параметр – тривалість анімації.

Елементи меню у прикладі мають hover-ефект. Він створюється з використанням::after pseudo-element. Код виглядає так:

Menu-sidebar li > a::after ( content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50% ); background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); transition: background-position .2s .1s ease-out; > a:hover::after ( background-position: -100% 0; )

::after pseudo-element містить елемент block level внизу кожного посилання з повною шириною та висотою 0.15em. Виглядає це як підкреслення. Особливість полягає в тому, що ми не просто застосовуємо колір фону до лінії, ми використовуємо функцію linear-gradient() на фонове зображення. Хоча ця функція призначена для створення градієнтів кольорів, ми можемо змінювати колір, вказавши потрібні відсотки.

Menu-sidebar li > a::after ( background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); )

Половина лінії тут прозора, а друга половина – жовта. Зробивши розмір фону 200%, ми подвоюємо ширину блоку. Тепер прозора частина займає всю ширину заслання, а жовта частина переміщається вліво і стає непомітною. Ми змінюємо стан фону при наведенні на -100%. Тепер жовта частина стає видимою, а прозора – прихована.

Замість прозорої частини можна використовувати будь-який інший колір. Ви також можете поекспериментувати з градієнтами.

Кожен із розглянутих нами елементів працює як єдине ціле. Ви можете створити таке меню за допомогою будь-якого дизайну сайту з колекції TemplateMonster. Як бачите, зробити це простіше, ніж можна собі уявити. Успіхів у створенні професійних та зручних для користувачів сайтів!

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

Але в даному уроці ми побудуємо просте меню з використанням jQuery. Воно буде працювати за допомогою методу анімації для створення затриманих ефектів. Разом з кодом JavaScript також використовуються ефекти переходів CSS3. В результаті виходить заготівля для навігації сайту.

HTML

Спочатку збудуємо основний шаблон HTML5. Потрібно остання версія jQuery ми отримуємо з API Google. Також додаємо файл стилів styles.css, який буде представлений нижче:

Тепер розглянемо структуру, яка побудована на основі невпорядкованого списку у верхній частині сторінки. Весь список міститься в HTML5