Css jquery меню, що випадає по кліку. Меню, що плавно відкривається, за допомогою jQuery. Меню навігації, що випадає
Отримавши кілька прохань, я вирішив написати статтю про те, як можна зробити меню, що випадає. Найкращий і найпростіший спосіб створити таке меню - це покластися на jQuery.
Давайте спершу розглянемо HTML-розмітку
Просте меню, що випадає на основі jQuery Просте меню, що випадає
- Home
- Products
- Services
- Contact Us
Content
Є простий невпорядкований список ul, його теги li - це основа меню навігації. Далі додайте нижченаведений код у відповідний тег li, цим ви структуруєте список, що випадає.
Якщо ви уважні, ви відмітите дві речі:
1. У тегу li є клас dropdown .
2. Посилання-батько має клас ddIcon.
Клас dropdown використовується в jQuery, щоб відкрити/сховати меню, що випадає. Другий клас ddIcon використовується для відображення покажчика на меню, що випадає.
У стилях меню немає нічого особливого - звичайні стилі:
Container ( width: 960px; margin: 0 auto; padding-top: 50px; ) .container h1 ( font-size: 30px; color: #666; margin-bottom: 1em; ) .container nav ( border-radius: 4px; background-color: #fff; height: 37px; ). bold;text-transform:uppercase;color:#545454;padding:13px 15px;display: block;border-right:1px solid #f9f9f9;). ") no-repeat 86% 52%; padding: 13px 25px 13px 15px; ) .container nav ul a:hover ( background-color: #cc333f; -color: #cc333f; color: #fff; cc333f, padding: 15px 15px 20px; width: 172px; left: 0px; top: 38px; display: none; ) .container nav ul li .subNav h4 ( margin-bottom: 0.5em; ) . solid #D33B47; padding: 7px 10px; ) .container nav ul li .subNav h4 a:hover (color: #edc951; ) . : #fff; -moz-transition: color 0.5s ease 0s; ) . ; display: block; text-transform: capitalize; color: #ffff; padding: 7px 15px; : #390206; ) .container .section ( clear: both; padding: 10px; ) .container .section article p ( font-size: 16px; color: #488fb8; p ( padding-top: 20px; font-size: 20px; color: #333; line-height: 1.3; margin-bottom: .4em; )
Тепер необхідно пожвавити випадаюче меню. У цьому нам допоможе найпростіша функція jQuery.
$(function()( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))) ( $(".subNav").css((" display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":"relative ", "z-index":"1001")); $(this).addClass("active"); ) ), function()( $(".subNav").css(("display":"none ")); $(this).removeClass("active"); $("nav ul li").css(("position":"relative", "z-index":"1")); ;));
Для кожного елемента списку можливо створити своє меню, що випадає: всередині елемента li розташуйте блок з класом.subnav , а також самому li привласніть клас.dropdown .
У цьому уроці ми покажемо вам, як створювати бічне меню, що випадає, для ще більш простої навігації по сайту. Таке меню – популярна тенденція у сучасному веб-дизайні. На багатьох веб-сайтах використовується цей тип меню. З його допомогою можна позбутися хаосу на сторінках проекту, зробити його більш читаним, зосереджуючи увагу користувачів на основному контенті.
Це чудовий спосіб досягти мінімалізму без відволікаючих факторів. Сьогодні створимо таке меню самостійно.
Щоб створити меню навігації, давайте спочатку ознайомимося з налаштуваннями:
Animation Menu Demo
Для початку необхідно завантажити 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 плагіни та css3 рішення, про які, власне, цей топік.
Особисто мені така реалізація меню навігації дуже подобається, так як зручна для користувачів з мобільними пристроями і дуже ефектно виглядає на великих моніторах. Сайтів з повноекранними меню з'являється все більше, безкоштовних jQuery плагінівтакож стає більше і концепція поступово стає трендом.
Отже. До вашої уваги 20 jQuery плагінів повноекранного меню у вікні popup.
Дуже приємним доповненням до вікна є анімована SVG іконка. За умовчанням вона має вигляд трьох смужок, але при натисканні іконка трансформується в стрілку, яка показує, що меню можна приховати. Ще один дуже крутий jquery скриптповноекранної навігації від тих самих розробників, що й плагін вище. Цей скрипт має дуже класний та незвичайний ефект появи. При натисканні на кнопку меню від іконки за допомогою css3 виходить хвиля через весь монітор, яка переростає у фон пунктів меню. Такий самий ефект приховування.
Ця навігація чудово працює на мобільних пристроях, але враховуючи, що ефект появи досить важкий, думаю, на старих телефонах все гальмуватиме (Я не перевіряв, так що буду радий, якщо ви напишіть свій досвід у коментарях).
На жаль, на мобільних телефонівпрацює некоректно: якщо багато пунктів меню, при цьому вони не поміщаються в екран, вертикальна прокручування не з'являється і навігація просто обрізається.
У цій статті ми розроблятимемо простеньке меню за допомогою 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 .
Так само кому цікаво, можете подивитися на попередній спосіб з допомогою CSS, який описаний у статті -
Тепер до діла. Як і в минулій статті, насамперед, давайте напишемо HTML код нашого меню. Код такий, як і в тій статті, щоб не було плутанини і було більш зрозумілим. Меню з двома пунктами та обидва мають підменю.
- пункт 1
- Випадаючий пункт 1
- Випадаючий пункт 2
- Випадаючий пункт 3
- пункт 2
- Випадаючий пункт 1
- Випадаючий пункт 2
- Випадаючий пункт 3
Якщо Ви маєте такий рядок або схожий, який уже раніше підключив бібліотеку, то знову робити цього не варто.
jQuery(document).ready(function($)( $("#slow_nav ul li")). ) ( $("ul", this).stop().slideUp(400); )); ));
У другому рядку скрипту вказуємо айді нашого меню. Якщо Ви застосовуєте даний спосібдо власного меню, то природно змінюйте ім'я на своє. У цьому випадку це - #slow_nav .
Також можна налаштувати час анімації. У цьому скрипті на відкривання та закривання коштує значення 400 мілісекунд, це 0,4 секунди. Якщо хочете, можете змінити на більше значення або на менше.
Останній крок додавання стилів. Вони дуже схожі зі стилями минулої статті, тільки в них відсутні властивості CSSанімації.
#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li( list-style: none; display: inline-block; decoration:none;) #slow_nav > ul > li > 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 bottom:1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child(margin-top:25px; position:relative; 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 на те, що буде у Вас, та й можна підправити ще щось по дрібницях. Докладно зупинятись не буду. Для кожного випадку потрібен персональний підхід, тому вибачте 🙂
На цьому все, дякую за увагу. 🙂