Вертикальне меню навігації з підменю CSS

68

У недавньому минулому я детально розписував спосіб і техніку створення «Вертикального меню для сайту». Ми розглянули рішення виконання простої навігації, побудованої повністю на використання CSS і невеликого файлу зображення. У своїх коментарях читачі висловилися про те, що варіант з вкладеними підпунктами не був би зайвим, ну що ж, як говориться: сказано — зроблено.
Сьогодні опишу, які зміни необхідно внести в css і розмітку, щоб отримати цікаве вертикальне меню навігації з підменю.

Останнє оновлення: 12.12.2016.

Демо

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

#menu li span {
 position: absolute;
left: 99%;
margin-top: -32px;
width: 100%;
max-width: 12em;
display: none;
}
#menu li:hover span {
 display: block;
}
#menu li span a {
 display: inline;
}

#menu li span {
position: absolute;
left: 99%;
margin-top: -32px;
width: 100%;
max-width: 12em;
display: none;
}
#menu li:hover span {
display: block;
}
#menu li span a {
display: inline;
}

В результаті ми отримуємо наступну повну картину:

#menu {
 max-width: 200px;
margin: 0 auto;
text-align: left
}
#menu ul {
 list-style: none;
margin: 0;
padding: 0;
position: relative
}
#menu li a {
 height: 32px;
height: 24px;
text-decoration: none;
font: 14px;
}
#menu li a:link, #menu li a:visited {
 color: #D3D3D9;
 display: block;
background: url(menu.gif);
padding: 8px 0 0 35px;
}
#menu li a:hover {
 color: #0D1FD2;
 background: url(menu.gif) 0 -32px;
padding: 8px 0 0 35px;
}
#menu li span {
 position: absolute;
left: 99%;
margin-top: -32px;
width: 100%;
max-width: 12em;
display: none;
}
#menu li:hover span {
 display: block;
}
#menu li span a {
 display: inline;
}

#menu {
max-width: 200px;
margin: 0 auto;
text-align: left
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
position: relative
}
#menu li a {
height: 32px;
height: 24px;
text-decoration: none;
font: 14px;
}
#menu li a:link, #menu li a:visited {
color: #D3D3D9;
display: block;
background: url(menu.gif);
padding: 8px 0 0 35px;
}
#menu li a:hover {
color: #0D1FD2;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 35px;
}
#menu li span {
position: absolute;
left: 99%;
margin-top: -32px;
width: 100%;
max-width: 12em;
display: none;
}
#menu li:hover span {
display: block;
}
#menu li span a {
display: inline;
}

На цьому все, оформлення підменю для нашого списку готово, залишилося лише правильно прописати навігаційний блок безпосередньо на сторінці html. Наведу приклад розмітки дворівневого меню, а далі вам залишається лише додавати нові пункти, стільки — скільки душі завгодно.

<div id="menu">
<ul>
<li>
<a href="#">CSS Головна</a>
</li>
<li>
<a href="#">CSS Меню</a> <span><a href="#">Підменю 1</a> <a href="#">Посилання</a> <a href="#">Посилання</a></span>
</li>
<li>
<a href="#">CSS Меню</a> <span><a href="#">Підменю 2</a> <a href="#">Посилання</a> <a href="#">Посилання</a></span>
</li>
<li>
<a href="#">CSS Меню</a> <span><a href="#">Підменю 3</a> <a href="#">Посилання</a> <a href="#">Посилання</a></span>
</li>
<li>
<a href="#">CSS Меню</a> <span><a href="#">Підменю 4</a> <a href="#">Посилання</a> <a href="#">Посилання</a></span>
</li>
<li>
<a href="#">CSS Меню</a> <span><a href="#">Підменю 5</a> <a href="#">Посилання</a> <a href="#">Посилання</a></span>
</li>
<li>
<a href="#">CSS Меню</a> <span><a href="#">Підменю 6</a> <a href="#">Посилання</a> <a href="#">Посилання</a></span>
</li>
</ul>
</div>

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

ДемоСкачать

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

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