Лабораторна робота № 7

Тема: «HTML. Створеня меню.»

Мета: Вміти правильно створювати горизонтальне і вертикальне меню.

Теоретичні відомості

Як правильно зверстати меню

Меню — це невід'ємна частина кожного сайту, ну або майже кожного. Меню (або навігація) дозволяє швидко переміщатися по основних розділах сайту, що дуже схоже на зміст у книгах. Особлива подібність помітна на картах сайту (різновид навігації):

Меню може виглядати по різному. Може бути горизонтальним

...вертикальним

...багаторівневими

...ті що містять малюнки

...меню може бути дуже різноманітним і зверстати його можна дуже по різному: таблицями, блоками, просто посиланнями, можливо посиланнями з <br / >...можна придумати масу "перекручених" способів і більшість із них будуть відповідати принципам блокової верстки. Але в професійних колах чомусь уважається, що навігація повинна бути на основі неупорядкованих списків — теги <ul>і <li>.

Чому в навігації слід використовувати ul?

Перше пояснення приходить, якщо просто логічно подумати: меню — це перелік посилань (розділів). А якщо не просто подумати, а заглянути в словник, наприклад Ожегова:

1. Перелік — Перерахування кого- чого-небудь один по одному

2. Перелік — Список з таким перерахуванням

стає ясно, що ми на правильному шляху.

Якщо мучать сумніви, звернемося по допомогу до авторитетів. W3C про списки:

Списки можуть містити:

• не впорядкований перелік

• упорядкований перелік

• навігацію

• визначення

Був ще такий тег <menu>, спеціально призначений для побудови меню. Але зараз він заборонений і самі батьки веб стандартів настійно рекомендують замість <menu> використовувати <ul>. Принаймні поки не оживе HTML5, списки — самий підходящий елемент для навігації.

Як використовувати списки для побудови навігації?

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

Зневірятися не варто, варто вчитися. CSS здатне творити чудеса.

Підемо по шляху від простого до складного.

Просте горизонтальне меню

HTML

1	<ul class="navigation">
2	<li><a href="#">Главная</a></li>
3	<li><a href="#">HTML и CSS приемы</a></li>
4	\   <li><a href="#">Обучение</a></li>
5	<li><a href="#">HTML справочник</a></li>
6	</ul>

Якщо в тебе пункти меню є звичайними посиланнями ( як на xiper.net), тоді досить просто позбутися маркерів і вибудувати пункти в один ряд.

1	.navigation {
2	list-style: none; /* ховаємо маркери */
3	}
4	.navigation li {
5	display: inline; /* вишиковуємо елементи списку в один ряд */
6	margin-right: 15px; /* робимо відступ щоб пункти меню не зливалися */
7	}

Для тих хто не в курсі, list-style задає вид маркера, а так само дозволяє його сховати.

За замовчуванням елементи списку (<li>) є… елементами списка display: list-item. А кожний такий елемент починається з нового рядка. Щоб це виправити, міняємо відображення елемента на рядковий (display: inline).

Горизонтальне меню з посиланнями у вигляді блоків

1	<ul class="navigation">
2	<li><a href="#">Главная</a></li>
3	<li><a href="#">HTML и CSS приемы</a></li>
4	<li><a href="#">Обучение</a></li>
5	<li><a href="#">HTML справочник</a></li>
6	</ul>

HTML

HTML залишаємо без змін, а CSS небагато ускладнитися:

01	.navigation {
02	list-style: none; /* ховаємо маркери */
03	}
04	.navigation li {
05	float: left; /* вишиковуємо елементи списку в один ряд */
06	margin-right: 15px; /* робимо відступ щоб пункти меню не зливалися */
07	}
08	.navigation li a {
09	display: block; /* міняємо відображення на блок, щоб мати можливість задавати внутрішні відступи */
10	padding: 3px 5px;
11	background: #ccc;
12	color: #000;
13	position: relative; /* для IE6, щоб посилання було кликабильной по всій своїй площі */
14	}
15	.navigation li a:hover {
16	background: #999;
17	color: #fff;
18	}

CSS

У даному прикладі вистраюємо меню вряд використовуючи float, при цьому не варто забувати, що тепер наступні за меню (<ul>) елементи, будуть намагатися його обтікати. Це можна усунути використовуючи clearfix або будь-який інший спосіб відновлення потоку.

Верстка вертикального меню

HTML

1	<ul class="navigation">
2	<li><a href="#">Главная</a></li>
3	<li><a href="#">HTML и CSS приемы</a></li>
4	<li><a href="#">Обучение</a></li>
5	<li><a href="#">HTML справочник</a></li>
6	</ul>

HTML залишаємо той же. Працюємо тільки з CSS:

01	.navigation {
02	list-style: none; /* ховаємо маркери */
03	width: 200px; /* обмежуємо ширину меню */
04	}
05	.navigation li {
06	margin-bottom: 5px; /* робимо відступ щоб пункти меню не зливалися */
07	zoom: 1; /* щоб в IE відступ між пунктами був як у всіх браузерів */
08	}
09	.navigation li a {
10	display: block; /* міняємо відображення на блок, щоб мати можливість задавати внутрішні відступи */
11	padding: 3px 5px;
12	background: #ccc;
13	color: #000;
14	position: relative; /* для IE6, щоб посилання було кликабильной по всій своїй площі */
15	}
16	.navigation li a:hover {
17	background: #999;
18	color: #fff;
19	}

Послідовність виконання роботи

Використовуючи вивчений матеріал і приведені приклади, створити меню за варіантом.

Варіант 1.

Варіант 2.

Варіант 3.

Варіант 4.

Варіант 5.

Варіант 6.

Варіант 7.