Меню для сайту css: оформлення навігації сайту

14

Від автора: вітаю вас на нашому блозі, дорогі читачі. Сьогодні я пропоную вам зробити в 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;
}

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

Меню для сайту css: оформлення навігації сайту

За бажанням можна додати всередину які-небудь іконки, змінити сам шрифт, також можна додати зміна кольору фону при наведенні на пункти.

.main-menu li a:hover{
background: #53C653
}

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

Горизонтальне меню

Власне, вже отриманого меню можна легко зробити горизонтальне. Для цього всього лише потрібно записати:

.main-menu ul li{
display: inline-block;
}

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

margin-right: -4px;

Меню для сайту css: оформлення навігації сайту

Можна поступити і по-іншому: не використовувати властивість 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. Це для того, щоб поставити картинку-фон, яка показувала б, що випадаюче меню.

Меню для сайту css: оформлення навігації сайту

Ось таку картинку ми поставимо в фон посиланням.

.main-menu .dropdown{
background:#75CB62 url(arrow.png) no-repeat 80% 50%;
}

Меню для сайту css: оформлення навігації сайту

Майже готово! Поки що наше підменю видно на сторінці, потрібно його приховати за допомогою display: none. Залишилося прописати ось такий от не самий зрозумілий селектор:

.main-menu .dropdown:hover ~ .sub-menu{
display: block;
}

Тут ми спочатку вказуємо, що стилі будуть застосовані, коли ми наведемо на елемент з класом dropdown (а це наш перший пункт), але застосовуватися вони не до самої ссылке, а до нашого підменю. Це можливо завдяки тому, що ми поставили знак ~ і дописали після нього потрібний селектор.

По суті, цей селектор говорить браузеру наступне: при наведенні на dropdown зроби видимим елемент sub-menu, який знаходитися в розмітці десь далі.

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

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

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

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