Меню за допомогою CSS

Категорії статей: CSS ; 16.04.2010

Зробимо меню з фоном (фоновим зображенням), що змінюється, при наведенні курсора на пункт меню. Меню буде вертикальним, і складатися з тексту на якому-небудь фоні. Також можна зробити і горизонтальне меню.
Для початки укладемо меню в блок div, який позначимо унікальним ідентифікатором "menu", по якому буде зрозуміло, що цей блок містить меню. Зауваєте, що просто вказати розміри елементу <a> (тобто посилання) не можна в браузерах Opera і Firefox, але можна в браузері Internet Explorer, що не є правильним. Поступимо таким чином: помістимо в кожен елемент <a> (тобто в посилання) елемент div, якому-то можна задавати необхідні розміри. Відповідно отримаємо HTML-код меню з декількома пунктами

Код
<div id="menu">
<a href="#"><div>Пункт 1</div></a>
<a href="#"><div>Пункт 2</div></a>
<a href="#"><div>Пункт 3</div></a>
<a href="#"><div>Пункт 4</div></a>
<a href="#"><div>Пункт 5</div></a>
</div>

Задамо блоку меню ширину, наприклад, 100px і інші необхідні властивості. Хай кожен пункт меню буде в прямокутній рамці, для цього блоку "menu" задамо властивість border для лівої і правої частини. А нижню частину прямокутної рамки кожного пункту ми зробимо пізніше.

Код
#menu { width:100px; background:#80E4EA; text-align:center; border:solid 1px #000; border-bottom:none; }

Можна додати первинний вигляд тексту посилань, наприклад, прибрати підкреслення

Код
#menu a { text-decoration:none; }

а також потрібно вказати властивості блоку div

Код
#menu div { width:100%; cursor:pointer; border-bottom:solid 1px #000; }

Властивість width:100% потрібна для коректного відображення пункту меню. Властивість "cursor: pointer" потрібно для браузеру Internet Explorer, аби курсор набирав вигляду покажчика що знаходиться над посиланням. Також властивістю border-bottom задаємо нижню рису пункта меню.
Тепер можна вказати властивості, які визначатимуть вигляд наших пунктів меню при наведенні на них курсора. І тут є одна особливість. Потрібно вказувати однакові властивості для селектора "#menu a:hover" і для селектора "#menu a:hover div"

Код
#menu a:hover { background:#0080FF; color:#FFFFFF; }
#menu a:hover div { background:#0080FF; color:#FFFFFF;}

В цілому наш код виглядатиме таким чином

Код
<html>

<head>
<title>Меню на CSS</title>
<style>
body { font-family: verdana, sans-serif; font-size:13px; }
#menu { width:100px; background:#80E4EA; text-align:center; border:solid 1px #000; border-bottom:none;}
#menu а { text-decoration:none; }
#menu div { width:100%; cursor:pointer; border-bottom:solid 1px #000; }
#menu a:hover { background:#0080FF; color:#FFFFFF; }
#menu a:hover div { background:#0080FF; color:#FFFFFF;}
</style>
</head>
<body>
<h1>Меню за допомогою CSS</h1>
<div id="menu">
<a href="#"><div>Пункт 1</div></a>
<a href="#"><div>Пункт 2</div></a>
<a href="#"><div>Пункт 3</div></a>
<a href="#"><div>Пункт 4</div></a>
<a href="#"><div>Пункт 5</div></a>
</div>

</body>
</html>


Проглянути роботу даного меню можна на сторінці з "прикладом". Можна як фон задати також і який-небудь малюнок (у властивості background). Це вже нескладно.
Можна зробити меню, що складається лише з малюнків (тобто пункти меню без тексту). Але треба пам'ятати, що пошукові машини не розрізняють текст на малюнках, і користувачі можуть відключати відображення малюнків в браузері. Для меню що складається з зображень, необхідно вказати для кожного елементу <a> (тобто посилання) свій унікальний клас, і прописати фоновий малюнок для випадків коли курсор не знаходиться над пунктом і знаходиться над пунктом. Наприклад

Код
<html>

<head>
<title>Меню на CSS</title>
<style>

body { font-family: verdana, sans-serif; font-size:13px; }

#menu_graf { width:100px; background:#0000FF;}
#menu_graf a { text-decoration:none; }
#menu_graf div { width:100px; height:30px; cursor:pointer; }
#menu_graf a.knopka1 { background: url("images/button_1.gif") no-repeat; }
#menu_graf a.knopka1 div { background: url("images/button_1.gif") no-repeat; }
#menu_graf a.knopka1:hover { background: url("images/button_1_hover.gif") no-repeat; }
#menu_graf a.knopka1:hover div { background: url("images/button_1_hover.gif") no-repeat; }

#menu_graf a.knopka2 { background: url("images/button_2.gif") no-repeat; }
#menu_graf a.knopka2 div { background: url("images/button_2.gif") no-repeat; }
#menu_graf a.knopka2:hover { background: url("images/button_2_hover.gif") no-repeat; }
#menu_graf a.knopka2:hover div { background: url("images/button_2_hover.gif") no-repeat; }

#menu_graf a.knopka3 { background: url("images/button_3.gif") no-repeat; }
#menu_graf a.knopka3 div { background: url("images/button_3.gif") no-repeat; }
#menu_graf a.knopka3:hover { background: url("images/button_3_hover.gif") no-repeat; }
#menu_graf a.knopka3:hover div { background: url("images/button_3_hover.gif") no-repeat; }

#menu_graf a.knopka4 { background: url("images/button_4.gif") no-repeat; }
#menu_graf a.knopka4 div { background: url("images/button_4.gif") no-repeat; }
#menu_graf a.knopka4:hover { background: url("images/button_4_hover.gif") no-repeat; }
#menu_graf a.knopka4:hover div { background: url("images/button_4_hover.gif") no-repeat; }

</style>
</head>
<body>

<div id="menu_graf">
<a class="knopka1" href="#"><div>&nbsp;</div></a>
<a class="knopka2" href="#"><div>&nbsp;</div></a>
<a class="knopka3" href="#"><div>&nbsp;</div></a>
<a class="knopka4" href="#"><div>&nbsp;</div></a>
</div>

</body>
</html>

Раніше Розкрутка сайту - 17 кроків для швидкої індексаціїї сайту та просуванню у пошукових системах | Пізніше Спливаюча підказка за допомогою CSS

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.48MB | 0.03Sec ad Google