Плавно відкривається меню за допомогою CSS. Вертикальне меню, що випадає на css: як його зробити
Від автора: всіх вітаю. Чомусь меню, що випадає у веб-майстрів асоціюється зі скриптами, але вже давно зробити таку навігацію можна абсолютно спокійно на чистому css. Причому таке меню буде нічим не гірше. Сьогодні я вам покажу, як створити в css меню, що випадає. Поділюся, так би мовити, рецептом.
План уроку і розмітка нашого меню
В общем-то, спочатку визначимося з тим, як будемо створювати саме меню. У html5 стандартним способом вважається створювати його в контейнері nav за допомогою маркованого списку. Давайте саме так і зробимо. Маркери ми пізніше приберемо за допомогою css, в меню вони нам зовсім не потрібні.
Власне, я відразу напишу в html розмітку з вкладеними списками. Тобто наші список буде дворівневим - в ньому будуть інші списки. А саме, на кожен пункт 1 список, який і буде формувати меню, що випадає.
Тут є важливий момент, Який полягає в тому, що вам, можливо, не потрібно кожен пункт робити випадає, а лише деякі. Без проблем, тоді в пунктах без випадання просто не створюємо вкладених списків.
Власне, ось вона, вся розмітка:
< nav id = "nav" > < ul > < li > < a href = "#" > Пункт 1< / a > < ul class = "second" > < li > < a href = "#" > підпункт< / a > < / li > < li > < a href = "#" > підпункт< / a > < / li > < li > < a href = "#" > підпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт 2< / a > < ul class = "second" > < li > < a href = "#" > підпункт< / a > < / li > < li > < a href = "#" > підпункт< / a > < / li > < li > < a href = "#" > підпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт3< / a > < ul class = "second" > < li > < a href = "#" > підпункт< / a > < / li > < li > < a href = "#" > підпункт< / a > < / li > < li > < a href = "#" > підпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт4< / a > < ul class = "second" > < li > < a href = "#" > підпункт< / a > < / li > < li > < a href = "#" > підпункт< / a > < / li > < li > < a href = "#" > підпункт< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Я розумію, що вона величезна. У цьому-то і проблема вкладених списків, що потрібно писати багато коду. Але враховуйте той факт, що ми робимо 4 основні пункти і для кожного буде меню, що випадає.
Власне, я задав всієї навігації ідентифікатор nav, а всіх вкладених списками - стильовий клас second, щоб розуміти, що вони є вкладеними.
Відмінно, розмітка у нас готова, можна подивитися на результат:
Да уж, виглядає жахливо. Але зараз ми включимо в роботу css і вже через кілька хвилин наша навігація перетвориться. Давайте працювати.
Пишемо css-стилі
Перше, що я зроблю, це скину все відступи за замовчуванням для всіх елементів. Вони нам будуть тільки заважати, краще задамо потім відступи самі, де це знадобиться.
* (Margin: 0; padding: 0;)
margin: 0; padding: 0; |
#nav (height: 70px;) #nav ul (list-style: none;)
#nav ( height: 70px; #nav ul ( list - style: none; |
Тепер нам потрібно, власне, вирішити, яким буде наше меню. Горизонтальним або вертикальним? Я пропоную спочатку зробити горизонтальне і подивитися все на його прикладі. Для цього потрібно написати такі стилі:
#nav\u003e ul\u003e li (float: left; width: 180px; position: relative;)
#nav\u003e ul\u003e li ( float: left; width: 180px; position: relative; |
Зауважте, що за допомогою знака\u003e ми звертаємося до пунктів списку, який безпосередньо вкладені в ul, а той безпосередньо вкладений в nav. Це дуже важливо, тому що дозволяє не застосувати стиль до пунктів вкладених списків. Справа в тому, що за моєю задумом в головному списку пункти будуть розташовуватися горизонтально, а у вкладених - вертикально.
Але ви, звичайно, можете робити по-іншому, в згоді зі своїм задумом. Ви можете зробити так, щоб всі пункти були в одну строчку.
У будь-якому випадку, вищенаведений код, я сподіваюся, ви розумієте. Він змушує пункти головного списку притискатися до лівого краю, так що всі вони встають в один рядок, хоча і є блоковими елементами. Також я задав їм явну ширину і відносне позиціонування.
Для чого позиціонування? Воно необхідне для того, щоб потім абсолютно позиціонувати вкладені списки. Якщо ви вивчали позиціонування в css, то напевно знаєте, що якщо задати блоку відносне позиціонування, то всі елементи в ньому можна буде позиціонувати абсолютно всередині саме цього блоку, а не всього вікна браузера.
Тим часом, ось що у нас вже вийшло:
З цього скриншоту ви можете вже уявити собі приблизний результат. Звичайно, нам ще належить красиво оформити пункти, щоб очі не благали про пощаду при перегляді навігації.
#nav li a (display: block; background: # 90DA93; border: 1px solid # 060A13; color: # 060A13; padding: 8px; text-align: center; text-decoration: none;) #nav li a: hover ( background: # 2F718E;)
#nav li a ( display: block; background: # 90DA93; border: 1px solid # 060A13; color: # 060A13; padding: 8px; text - align: center; text - decoration: none; #nav li a: hover ( background: # 2F718E; |
По-перше, самі посилання потрібно зробити блоковими. Це необхідно для того, щоб працювали внутрішні відступи і коректно застосовувалися всі властивості. Далі вказую кольору фону, тексту, параметри рамки, внутрішні відступи і вирівнювання тексту по центру. Нарешті, скасовую підкреслення посилань.
Всі ці параметри не обов'язково прописувати так, як це зробив я. Кольори ви можете вибрати довільно, рамку зробити іншу або взагалі не використовувати, відступи можна зменшувати або збільшувати.
Зауважте, що в даному випадку ми не використовували знак\u003e, тому зазначені правила застосуються до всіх посилань, в тому числі і тим, що знаходяться у вкладених пунктах. Отже, тепер маємо наступне:
Відмінно, але ж ви розумієте, що підпункти не повинні бути видно, вони повинні розкриватися при наведенні на потрібний пункт. Без цього наше меню схоже на таблицю. Що ж, саме час заховати вкладені пункти.
#nav li .second (display: none; position: absolute; top: 100%;)
#nav li .second ( display: none; position: absolute; top: 100%; |
По-перше, приховуємо повністю вкладені списки. По-друге, задаємо їм абсолютне позиціонування і координату top: 100%. Це означає, що меню, що випадає буде відображатися чітко під основним пунктом, якому належить, чітко під 100% висоти цього пункту.
Тепер ми бачимо на веб-сторінці тільки основне меню, що нам і потрібно.
Реалізуємо випадання
Нам залишилося зробити найголовніше - реалізувати саме випадання. В цьому немає нічого складного, дивіться на цей код:
#nav li: hover .second (display: block;)
#nav li: hover .second ( display: block; |
Цей код буде працювати бездоганно. При наведенні на пункт основного меню, вкладений список буде ставати видимим. Причому тільки той список, куди вкладений в пункт, на який наводиться курсор.
Є тільки одна незначна проблема - ширина вкладених пунктів не відповідає ширині основних. Але це дуже легко вирішується дописуванням відповідних стилів:
#nav li li (width: 180px;)
#nav li li ( width: 180px; |
Все, проблема вирішена:
Все працює відмінно. При наведенні на основний пункт з'являється відповідне йому меню, що випадає. Якщо прибрати курсор в сторону - воно пропадає. Якщо перевести курсор на самі вкладені пункти, то можна буде по ним клікнути і перейти в потрібний розділ сайту. Таким чином, ми зробили з вами дуже просте і легке меню, що випадає абсолютно без скриптів.
Переробляємо меню в вертикальне
Ну добре, з горизонтальною навігацією ми з вами повністю розібралися, але ж крім неї на сайтах дуже часто зустрічається і вертикальна і вона теж може бути випадає. Насправді переробити меню з горизонтального на вертикальне дуже легко, нам доведеться змінити буквально пару рядків коду.
По-перше, вам потрібно буде прибрати float: left у головних пунктів списку. Саме це властивість сприяє тому, що наші пункти відображаються в один рядок, але навіщо нам це, якщо навігація повинна бути вертикальної?
Тепер залишається змінити правила для селектора #nav li .second, тобто для вкладених списків, а саме, їх потрібно трохи по-іншому позиціонувати. Ось так:
#nav li .second (display: none; position: absolute; left: 100%; top: 0;)
#nav li .second ( display: none; position: absolute; left: 100%; top: 0; |
Тобто необхідно прописати дві координати замість однієї. По-перше, у випадку з горизонтальною навігацією я говорив, що за задумом пункти вкладених меню повинні відображатися під основними пунктами. У випадку з вертикальним меню це не підходить - пункти повинні відображатися збоку.
Тому змінюємо top: 100% на left: 100%. Крім цього, координата top нам теж потрібна. Задаємо їй 0, щоб вкладене меню знаходилося на одному рівні з пунктом, яким відповідають.
Все, тепер все працює так, як треба. Можете протестувати. Як бачите, я не брехав, коли говорив, що доведеться переписати всього кілька рядків коду.
Горизонтальне меню з декількома рівнями
Використовуючи приблизно такий же підхід ви можете створити більше рівнів меню, якщо це сильно необхідно. Наприклад, давайте створимо для четвертого пункту головного меню список, який буде вкладено в один з підпунктів.
Михайло сб, 09/20/2014 - 12:28
Щось мій коментар ніхто не бачить - дублюю:
===========
Спасибі, але у мене (під Інт.Експл-8) меню не випадає. Тобто не працює рядок "ul. navli: hover ul (display: block;) "
Підкажіть, в чому справа?
Є пожеданія за викладом матеріалу:
Добре б в цьому рядку (ul.aaaaa li: hover ul (display: block;)) розтлумачити, яка її частина відповідає за "випадання меню", а яка - за переховування пунктів глибшого рівня вкладеності
Добре б в прикладах кожен рядок постачати коментарем, що вона робить.
Зокрема, неясно, навіщо потрібна рядок "
Держпослуги особистий кабінет
Госуслугі- особистий кабінет-вхід по СНІЛС і телефону
Єдиний телефон служби порятунку в російській федерації