Як створити випадаюче CSS меню?

625

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

План уроку і розмітка нашого меню

Загалом-то, спочатку визначимося з тим, як будемо створювати меню. В html5 стандартним способом вважається створювати його в контейнері nav з допомогою маркірованого списку. Давайте саме так і зробимо. Маркери пізніше ми приберемо з допомогою css, в меню вони нам зовсім не потрібні.

Власне, я відразу напишу в html розмітку з вкладеними списками. Тобто наші список буде дворівневим – в ньому будуть інші списки. А саме, на кожен пункт 1 список, який і буде формувати випадаюче меню.

Тут є важливий момент, який полягає в тому, що вам, можливо, не потрібно кожен пункт робити випадаючим, а лише деякі. Без проблем, тоді в пунктах без випадання просто не створюємо вкладених списків.

Власне, ось вона, вся розмітка:

  • Пункт 1
    • Підпункт
    • Підпункт
    • Підпункт
  • Пункт 2
    • Підпункт
    • Підпункт
    • Підпункт
  • Пункт 3
    • Підпункт
    • Підпункт
    • Підпункт
  • Пункт 4
    • Підпункт
    • Підпункт
    • Підпункт

Я розумію, що вона величезна. У цьому-то і проблема вкладених списків, що потрібно писати багато коду. Але враховуйте той факт, що ми робимо 4 основних пункти і для кожного буде випадаюче меню.

Власне, я задав всієї навігації ідентифікатор nav, а всіх вкладених списками – стильовий клас second, щоб розуміти, що вони є вкладеними.

Відмінно, розмітка у нас готова, можна подивитися на результат:

Як створити випадаюче CSS меню?

Так, виглядає жахливо. Але зараз ми включимо в роботу css і вже через кілька хвилин наша навігація зміниться. Давайте працювати.

Пишемо css-стилі

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

*{
margin: 0;
padding: 0;
}

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

#nav{
height: 70px;
}
#nav ul{
list-style: none;
}

Тепер нам потрібно, власне, вирішити, яким буде наше меню. Горизонтальним або вертикальним? Я пропоную спочатку зробити горизонтальне і подивитися всі на його прикладі. Для цього потрібно написати такі стилі:

#nav > ul > li{
float: left;
width: 180px;
position: relative;
}

Зауважте, що з допомогою знака > ми звертаємося до пунктів списку, який безпосередньо вкладені у ul, а той безпосередньо вкладений у nav. Це дуже важливо, так як не дозволяє застосувати стиль до пунктів вкладених списків. Справа в тому, що за моєю задумом в головному списку пункти будуть розташовуватися горизонтально, а під вкладених – вертикально.

Але ви, звісно, можете робити по-іншому, у згоді зі своєю задумкою. Ви можете зробити так, щоб всі пункти були в одну сходинку.

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

Для чого позиціонування? Воно необхідне для того, щоб потім абсолютно позиціонувати вкладені списки. Якщо ви вивчали позиціонування в css, то напевно знаєте, що якщо задати блоку відносне позиціонування, то всі елементи в ньому можна буде позиціонувати абсолютно всередині цього блоку, а не всього вікна браузера.

Тим часом, ось що у нас вийшло:

Як створити випадаюче 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;
}

По-перше, самі посилання потрібно зробити блоковими. Це необхідно для того, щоб працювали внутрішні відступи і коректно застосовувалися всі властивості. Далі вказую кольору фону, тексту, параметри рамки, внутрішні відступи, вирівнювання тексту по центру. Нарешті, скасовую підкреслення посилань.

Всі ці параметри не обов’язково прописувати так, як це зробив я. Кольори ви можете вибрати довільно, рамку зробити іншу або взагалі не використовувати, відступи можна зменшувати або збільшувати.

Зауважте, що в даному випадку ми не використовували знак >, тому зазначені правила застосовуються до всіх посилань, в тому числі і тим, що знаходяться у вкладених пунктах. Отже, тепер маємо наступне:

Як створити випадаюче CSS меню?

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

#nav li .second{
display: none;
position: absolute;
top: 100%;
}

По-перше, приховуємо повністю вкладені списки. По-друге, задаємо їм абсолютне позиціонування і координату top: 100%. Це означає, що випадаюче меню буде відображатися чітко під основним пунктом, якому належить, чітко під 100% висоти цього пункту.

Як створити випадаюче CSS меню?

Тепер ми бачимо на веб-сторінці тільки основне меню, що нам і потрібно.

Реалізуємо випадання

Нам залишилося зробити найголовніше – реалізувати саме випадання. В цьому немає нічого складного, дивіться на цей код:

#nav li:hover .second{
display: block;
}

Цей код буде працювати бездоганно. При наведенні на пункт основного меню, вкладений список буде ставати видимим. Причому тільки той список, що вкладений в пункт, на який наведено курсор.

Як створити випадаюче CSS меню?

Є тільки одна незначна проблема – ширина вкладених пунктів не відповідає ширині основних. Але це дуже легко вирішується дописуванням відповідних стилів:

#nav li li{
width: 180px;
}

Все, проблема вирішена:

Як створити випадаюче CSS меню?

Все працює відмінно. При наведенні на основний пункт з’являється відповідне йому випадаюче меню. Якщо прибрати курсор убік – воно пропадає. Якщо перевести курсор на самі вкладені пункти, то можна буде за ним клікнути і перейти в потрібний розділ сайту. Таким чином, ми зробили з вами дуже просте і легке випадаюче меню абсолютно без скриптів.

Переробляємо у вертикальне меню

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

По-перше, вам потрібно буде прибрати float:left у головних пунктів списку. Саме це властивість сприяє тому, що наші пункти відображаються в один рядок, але навіщо нам це, якщо навігація повинна бути вертикальною?

Тепер залишається змінити правила для селектора #nav li .second, тобто для вкладених списків, а саме, їх треба трохи по-іншому позиціонувати. Ось так:

#nav li .second{
display: none;
position: absolute;
left: 100%;
top: 0;
}

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

Тому змінюємо top: 100% left: 100%. Крім цього, координата top нам теж потрібна. Задаємо їй 0, щоб вкладене меню знаходилося на одному рівні з пунктом, якому відповідають.

Як створити випадаюче CSS меню?

Все, тепер все працює так, як треба. Можете протестувати. Як бачите, я не брехав, коли говорив, що доведеться переписати усього кілька рядків коду.

Горизонтальне меню з декількома рівнями

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

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

    #nav li li .third{
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    }
    #nav li li:hover .third{
    display: block;
    }

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

    Увага! Щоб абсолютне позиціонування працювало списку third, списків second повинно бути задано відносне позиціонування. Але як, якщо ми ж ставили для нього абсолютне позиціонування?

    Що ж, якщо вам потрібно меню трьох рівнів, то доведеться прибирати в second абсолютне позиціонування, а у головних пунктів прибирати відносне. Вся фішка в тому, що у випадку з горизонтальним меню це ніяк не вплине на відображення навігації – підпункти раніше будуть розташовуватися під головним пунктом при наведенні на нього.

    Зате після цих змін ви зможете додати меню для кожного підпункту. Знову ж таки, необов’язково вона повинна відображатися збоку, це всього лише моя ідея, ви можете відображати його під підпунктом при наведенні на нього. Тоді взагалі ніякого позиціонування не знадобиться!

    Загалом, підсумок такий:

    Як створити випадаюче CSS меню?

    При наведенні на пункт 4 з’являється перше випадаюче меню, при наведенні на перший підпункт з’являється окреме меню для нього, яке розташоване збоку. В інших підпунктів таке меню не відображається, так як ми не створювали його в html-розмітки.

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

    Підсумок

    Загалом, вам головне зрозуміти, як правильно позиціонувати вкладене меню, а також як безпосередньо реалізовується випадання. Сподіваюся, з цієї статті ви це зрозуміли і тепер самостійно на чистому css зможете робити таку навігацію. Ми з вами дізналися, як зробити випадаюче меню.

    Багато інших дуже цікавих можливостей css ви можете дізнатися в нашому преміум-курсі з новим фішках css3. Там ви навчитеся робити градієнти, працювати з новими селекторами, створювати тіні і т. д. Якщо вам подобається css, то точно сподобається ця серія уроків. Ну а на цьому я прощаюся з вами.