Створення випадного меню з допомогою CSS

61

Продовжуючи вивчення і шалений вгризання у всі премудрості використання технік CSS, часто експериментую з створенням різних видів навігаційних меню. Іноді за основу береться вже існуюча структура вподобаного рішення і методом проб і помилок, привноситься щось нове в стиль оформлення, а можливості CSS часом, здаються воістину безмежні.
Зокрема сьогодні, хочу розповісти ще про один чудовому способі створення меню з випадаючим меню, без будь-яких javascript, застосовуючи в роботі виключно властивості CSS.
Ідею і структуру самого блоку меню, як це часто буває, подав закордонний товариш і напевно хороший такий «буржуяка» Janko.
Як кажуть, кому цікаво, дивіться оригінал там же.

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

Мені подобається, коли меню веде себе як списки, що розкриваються. Майстровий люд часто використовує javaScript, щоб досягти цього ефекту, ми ж будемо «користувач» тільки CSS з новими властивостями CSS3.

Дивитися Демо

Розходження з оригіналом, відразу кидаються в очі, цим і хороша техніка CSS3, можна досягти будь-якого результату в оформленні елементів інтерфейсу сайтів.
І так, структура меню зрозуміла, прості, вкладені, невпорядковані списки, без нагромаджень коду.

Структура выпадающего меню CSS

HTML Розкладка

<ul id="nav">
<li><span>Меню 1</span>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
</ul>
</li>
<li><span>Меню 2</span>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
</ul>
</li>
<li><span>Меню 3</span>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
</ul>
</li>
<li><span>Меню 4</span>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
</ul>
</li>
</ul>

Відображення та приховання підпункту меню здійснюється простим властивістю елемента при наведенні на нього ul > li:hover ul. За допомогою цього вибору можна визначити поведінку всіх підменю.
Фоном основного меню в оригіналі є невелике зображення розміром 1 x 35px, ми ж спробуємо обійтися і без нього, властивості background: пропишемо певне значення кольору в HEX, вийде background: #d0d0d0;. Варіантів безліч, все залежить від фантазії, можна, наприклад, використовувати можливості градієнтів CSS, для фонової заливки тіла меню.

CSS

CSS параметры меню

Ось так невимушено, вибудовується обрис блоку навігації. Для розкривних при наведенні списків і підпунктів, додав властивість скруглення кутів border-radius. Наплювавши на убогий IE6, використовував box-shadow, для створення легкої тіні у випадаючих списків. Проблеми, як завжди тільки з загальмованим ІЕшкой, інші сучасні браузери відображають всі чудово.

/* Формуємо меню
* випадними підпунктами
*/
#nav {
 margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1124px;
height: 34px;
display: inline-block;
list-style: none;
position: relative;
font-size: 0.8em;
background: #d0d0d0;
 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}
#nav>li {
 list-style-type: none;
float: left;
display: block;
margin: 0;
position: relative;
padding: 10px;
width: 120px;
}
#nav>li:hover ul {
 display: block;
}
#nav>li:hover {
 background-color: #AAA4A4;
 border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 3px 3px #352929;
 -webkit-box-shadow: 2px 3px 3px #352929;
 -moz-box-shadow: 2px 3px 3px #352929;
}
#nav ul li {
 margin: 0;
padding: 0;
display: none;
}
#nav li ul li {
 list-style-type: none;
margin: 10px 0 0 0;
}
#nav li ul li a {
 display: block;
padding: 10px 5px;
color: #83FA03;
 text-decoration: none;
}
#nav li ul li:hover a {
 background-color: #606060;
 border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 2px 2px #352929;
 -webkit-box-shadow: 1px 2px 2px #352929;
 -moz-box-shadow: 1px 2px 2px #352929;
}
#nav li span {
 cursor: pointer;
margin: 0px 10px;
font-weight: bold;
color: #263348;
}

/* Формуємо меню
* випадними підпунктами
*/#nav {
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1124px;
height: 34px;
display: inline-block;
list-style: none;
position: relative;
font-size: 0.8 em;
background: #d0d0d0;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 0 20px rgba(0, 0, 0, .19);
}
#nav>li {
list-style-type: none;
float: left;
display: block;
margin: 0;
position: relative;
padding: 10px;
width: 120px;
}
#nav>li:hover ul {
display: block;
}
#nav>li:hover {
background-color: #AAA4A4;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 3px 3px #352929;
-webkit-box-shadow: 2px 3px 3px #352929;
-moz-box-shadow: 2px 3px 3px #352929;
}
#nav ul li {
margin: 0;
padding: 0;
display: none;
}
#nav li ul li {
list-style-type: none;
margin: 10px 0 0 0;
}
#nav li ul li a {
display: block;
padding: 10px 5px;
color: #83FA03;
text-decoration: none;
}
#nav li ul li:hover a {
background-color: #606060;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 2px 2px #352929;
-webkit-box-shadow: 1px 2px 2px #352929;
-moz-box-shadow: 1px 2px 2px #352929;
}
#nav li span {
cursor: pointer;
margin: 0px 10px;
font-weight: bold;
color: #263348;
}

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

Дивитися Демо

джерело: Janko

доповнення і адаптація: driver

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: