Від автора: вітаю вас на нашому блозі, дорогі читачі. Сьогодні я пропоную вам зробити в html меню для сайту. Css нам теж у цій справі допоможе – з його допомогою ми оформимо нашу навігацію.
Вертикальне меню
Насамперед давайте спробуємо зробити вертикальну навігацію, так як сьогодні вона дуже поширена на багатьох сайтах. В основному її роблять за допомогою списку, але в html5 з’явився спеціальний тег для важливих посилань на сторінці – nav. У нього ми й обернем наш список. Отже, розмітка:
- 1
- 2
- 3
- 4
- 5
Відразу ж наше меню отримало свій унікальний стильової клас, щоб ми могли повернутися до його оформлення. Також в кожен пункт списку потрібно вписати ще й посилання, бо на реальному сайті ці пункти клікабельні. Звичайно, в нашому випадку це просто порожні посилання.
Приступаємо до оформлення
Поки наша навігація виглядає дуже непоказно. Приступаємо відразу ж до його оформлення. Першим ділом, потрібно прибрати маркери пунктів у списку, також потрібно прибрати підкреслення у посилань і змінити їх колір.
.main-menu ul{
list-style: none;
margin: 0;
padding: 0;
}
.main-menu li a{
text-decoration: none;
color: black;
display: block;
padding: 25px;
}
Крім цього, ми перетворили посилання в блокові елементи, так як саме до них будуть застосовуватися всі стилі для визначення зовнішнього вигляду. Відразу ж дамо внутрішні відступи, щоб наш блок збільшився в розмірах. Тепер необов’язково наводити саме на слова для переходу, оскільки елемент став блоковим і перехід відбудеться, навіть якщо натискати на порожні місця в блоках.
Якщо вам необхідно, то ви можете додати довільні кольори фону до посилань, щоб оформлення не виглядало занадто нудним. Кінцеві стилі в нашому випадку виглядають так:
.main-menu li a{
text-decoration: none;
color: black;
display: block;
padding: 10px 25px;
background: #75CB62;
border: 1px solid brown;
width: 70px;
}
Переопределим трохи відступи, задамо фон і рамку, і, найголовніше, потрібно задати ширину, тому що без цієї властивості наші блоки будуть розтягуватися на всю ширину вікна, що не є добре. Тепер наша навігація виглядає так:
За бажанням можна додати всередину які-небудь іконки, змінити сам шрифт, також можна додати зміна кольору фону при наведенні на пункти.
.main-menu li a:hover{
background: #53C653
}
Ось так і робиться вертикальне меню для сайту на css, а ще його дуже легко перетворити в горизонтальне, що ми зараз і зробимо.
Горизонтальне меню
Власне, вже отриманого меню можна легко зробити горизонтальне. Для цього всього лише потрібно записати:
.main-menu ul li{
display: inline-block;
}
Однак якщо перетворити пункти списку в блочно-рядкові, то між ними утворюється невеликий відступ праворуч. Він дорівнює чотирьом пікселям, тому якщо ви хочете позбутися від нього, то потрібно поставити негативний margin:
margin-right: -4px;
Можна поступити і по-іншому: не використовувати властивість display, а відправити всі блоки ліворуч за допомогою float: left, тоді ніяких відступів між пунктами і не буде.
Як зробити випадаюче меню для сайту
Давайте залишимо inline-block, дописавши негативний відступ праворуч і реалізуємо для першого пункту спадне підменю з трьома пунктами. Для цього нам доведеться змінити для пунктів списку правило:
.main-menu ul > li{
display: inline-block;
margin-right: -4px;
}
Вказавши перед li знак більше ми говоримо браузеру, щоб він застосував властивість лише до безпосередньо вкладених пунктів списку. Нова розмітка виглядає так:
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
- Пункт 5
Як бачите, ми додали вкладений список в перший пункт і додали до нього клас. Додамо такі стилі, щоб остаточно оформити наші меню.
.main-menu ul > li{
display: inline-block;
position: relative;
margin-right: -4px;
}
.sub-menu{
margin: 0;
padding: 0;
position: absolute;
}
Ми поставили абсолютне позиціонування нашої вкладеної навігації, щоб вона випала з потоку. Також зауважте, що першою посиланням заданий клас dropdown. Це для того, щоб поставити картинку-фон, яка показувала б, що випадаюче меню.
Ось таку картинку ми поставимо в фон посиланням.
.main-menu .dropdown{
background:#75CB62 url(arrow.png) no-repeat 80% 50%;
}
Майже готово! Поки що наше підменю видно на сторінці, потрібно його приховати за допомогою display: none. Залишилося прописати ось такий от не самий зрозумілий селектор:
.main-menu .dropdown:hover ~ .sub-menu{
display: block;
}
Тут ми спочатку вказуємо, що стилі будуть застосовані, коли ми наведемо на елемент з класом dropdown (а це наш перший пункт), але застосовуватися вони не до самої ссылке, а до нашого підменю. Це можливо завдяки тому, що ми поставили знак ~ і дописали після нього потрібний селектор.
По суті, цей селектор говорить браузеру наступне: при наведенні на dropdown зроби видимим елемент sub-menu, який знаходитися в розмітці десь далі.
Якщо раптом нам якийсь інший пункт теж потрібно буде зробити випадаючим, то просто допишемо для нього клас dropdown, створимо всередині нього свій список .sub-menu і все буде працювати.
Ось такий не зовсім звичайний, але досить цікавий спосіб реалізувати випадаюче меню в одного або кількох пунктів.
Ну а як реалізувати адаптивне меню для сайту css? Для цього достатньо буде прописати певні медіа-запити, щоб стилі мінялися при зміні ширини екрана. Докладно питання адаптивності ви зможете вивчити в курсі по практиці верстки під мобільні пристрої.
На цьому я з вами прощаюся. Бажаю вам вдалого вивчення веб-технологій.
