1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Лекція 6 - CSS, Горизонтальне багаторівневе меню

Принципи побудови меню за допомогою CSS
Формування динамічного списку
Двошарове горизонтальне меню
Усунення атрибутів списку
Вертикальність підменю

Принципи побудови меню за допомогою CSS

Меню є важливим елементом Веб-сторінки. При оформленні його засобами СSS забезпечується прозорий HTML код, що сприяє гарному індексуванню сторінки пошуковими серверами.
Меню будується на основі багаторівневого списку посилань. Масштаб меню визначається розміром його шрифту font-size: 12px;. Виділення пунктів списку забирається за допомогою правила list-style-type: none; , а підкреслення посилань - text-decoration: none; . Щоб на вибір реагував весь пункт меню, а не тільки його надпис використовується правило display: block;.
Горизонтальне розташування пунктів списку верхнього рівня в лівому верхньому кутку забезпечується правилом обтікання float: left;. Прив’язка підпункту меню до вибраного пункту згідно правила position: relative;. Правило display: none; , застосоване до елементів списку другого рівня (ul li ul), забороняє показ підменю. Правило display: block; при виборі пункту меню або русі по підменю (div#menunav ul li:hover ul, div#menunav ul li ul:hover) забезпечує відображення підменю.
Детальніше із принципами роботи меню можна ознайомитися за допомогою коментарів до його коду.

Формування динамічного списку

Аналіз коду розпочнемо із мінімального набору правил, які формують вертикальний динамічний список, пункти якого можуть розкриватися

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Горизонтальне CSS меню</title>
<style>
body { /* загальне оформлення тексту */
margin : 0; /* віддаль між блоками відсутня */
padding : 10px; /* відступ вмісту від межі блоку = 10px */
font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
/* типи шрифтів*/
background-color: #ffffff; /* білий колір фону*/
}
/* місце поповнення правил ……..*/
body div#menunav ul li ul {
display: none; /*приховування випадаючого меню до вибору верхнього пункту*/
}
div#menunav ul li:hover ul, div#menunav ul li ul:hover {
display: block; /* відображення випадаючого підменю при виборі верхнього
пункту або ж і пункту самого підменю */
}
</style>
</head>
<body>
<div id="menunav">
<ul>
<li><a href="#">розділ 1</a>
<ul>
<li><a href="#">підрозділ 1</a></li>
<li><a href="#">підрозділ 2</a></li>
<li><a href="#">підрозділ 3</a></li>
<li><a href="#">підрозділ 4</a></li>
</ul>
</li>
<li><a href="#">розділ 2</a>
<ul>
<li><a href="#">підрозділ 1</a></li>
<li><a href="#">підрозділ 2</a></li>
<li><a href="#">підрозділ 3</a></li>
<li><a href="#">підрозділ 4</a></li>
</ul>
</li>
<li><a href="#">розділ 3</a>
<ul>
<li><a href="#">підрозділ 1</a></li>
<li><a href="#">підрозділ 2</a></li>
<li><a href="#">підрозділ 3</a></li>
</ul>
</li>
<li><a href="#">розділ 4</a>
<ul>
<li><a href="#">підрозділ 1</a></li>
<li><a href="#">підрозділ 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Вид меню на етапі

Лекція 6 - CSS, Горизонтальне багаторівневе меню

Двошарове горизонтальне меню

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

div#menunav {
width: 100%; /* ширина блоків div */
float: left; /* горизонтальний список в div */
border-top: 1px solid #000000; /* лінія поверх div */
border-bottom: 1px solid #000000; /* лінія знизу div */
font-size: 12px; /* размір шрифту */
background-color: #b3b3b3; /* фоновый колір div */
padding: 0 0 0 30px; /* відступ ul від краю контейнера */
}
div#menunav ul {
margin: 0px; /* віддаль між блоками підменю відсутня */
padding : 0px; /* відступ вмісту від межі відсутній */
}
* html div#menunav a {
display: block; /* пункти вкладеного меню виділяються цілком */
text-decoration: none; /* усунення підкреслення посилань */
padding: 0px 10px 0px 10px; /* відступ від країв тексту */
}
div#menunav li {
float: left; /* розташування списку по горизонталі */
position: relative; /* контекст позиціонування підменю */
list-style-type: none; /* усунення маркерів списку */
background-color: #ffebc6; /* фоновий колір елементів меню */
border-right: 1px solid #000000; /* роздільники між елементами li */
}

Вид меню на етапі
Лекція 6 - CSS, Горизонтальне багаторівневе меню

Усунення атрибутів списку

Наступне поповнення правил усуває підкреслення елементів списку, однак нижній шар меню тепер висвічується постійно.

div#menunav li:first-child {
border-left: 1px solid #000000; /* перша вертикальна лінія в меню */
}
div#menunav a {
text-decoration: none; /* усунення підкреслення посилань */
padding: 0px 10px 0px 10px; /* відступ від країв тексту */
color: #006699; /* колір шрифту */
}
div#menunav a:hover {
color: #ff3333; /* колір при захваті пункту мишкою */
}
div#menunav li:hover {
background-color: #ffffff; /* фон пунктів списку */
}
	

Вид меню на етапі
Лекція 6 - CSS, Горизонтальне багаторівневе меню

Вертикальність підменю

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

div#menunav ul li ul {
position: absolute; /* забороняє підсвітку фону із верхнього меню при виборі*/
left: -1px; /* вирівнює випадаюче меню під верхнє поле*/
width: 10em; /* задає ширину випадаючого меню */
/* відсутність float робить випадаюче підменю вертикакльним*/
}
div#menunav ul li ul li {
border-left: 1px solid #000000; /* три сторони рамки пунктів випадаючого меню */
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}
div#menunav ul li ul li:first-child {
border-top: 1px solid #000000; /* верхній край першого пункту випадаючого меню */
}
	

Вид готового меню
Лекція 6 - CSS, Горизонтальне багаторівневе меню

Додати коментар


Захисний код
Оновити

Меню

  •  Facebook 

Обрати мову

Хто на сайті

На сайті 170 гостей та відсутні користувачі