Вертикальне меню для сайту CSS

47

В черговий раз, із завидною завзятістю хочу звернути Вашу увагу на рішення по виготовленню навігаційного меню на сторінках сайту.
Як ми не раз переконувалися, способів створення, різних методик та й вже готових до використання менюшек, існує величезна кількість. Запропонувати що-небудь отаке досить складно, так що звернемося до перевіреного і вже нам знайомому рішенням створення блоку меню за допомогою каскадних таблиць стилів (CSS).
Завжди хочеться, щоб меню було не тільки функціональним, але і виглядало красиво і менше мороки з кодом на сторінках HTML.

Давайте розглянемо весь процес виготовлення цікавого, вертикального меню для сайту, повністю побудованого на використанні CSS і невеликого файлу зображення, яке Ви з легкістю зможете відредагувати його під свої потреби.

Вертикальное меню для сайта

Переходимо від слів до справи і по накатаній дивимося приклад меню в дії:

Демо

Тепер, розкладемо на складові саме меню і дізнаємося що до чого.
Щоб у Вас вийшло те що ви бачили в прикладі, вам знадобитися в першу чергу прописати у файлі стилів (якщо ні то створити і обізвати: styles.css) наступний код:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* Стилі оформлення меню */
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menu {
width: 200px;
margin: 10px;
}
#menu li a {
height: 32px;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFF;
display: block;
background: url(menu.gif);
padding: 8px 0 0 35px;
}
#menu li a:hover {
color: #FFF;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 35px;
}

/* Стилі оформлення меню */
ul {
list-style: none;
margin: 0;
padding: 0;
}img {
border: none;
}
#menu {
width: 200px;
margin: 10px;
}
#menu li a {
height: 32px;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFF;
display: block;
background: url(menu.gif);
padding: 8px 0 0 35px;
}
#menu li a:hover {
color: #FFF;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 35px;
}

Можна розмістити цей код безпосередньо на сторінці HTML перед тегом /head. Але все ж краще використовувати окремий файл стилів для оформлення сторінок сайту.

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

<link rel="stylesheet" href="styles.css" type="text/css" />

Прописувати цей рядок слід на початку html сторінки між тегами head і /head
Для оформлення зовнішнього вигляду меню, знадобиться графічне зображення, в даному випадку використаний файл у форматі gif. Знайдете його в архіві з вихідними кодами. Можна використовувати своє зображення, на свій смак і колір, це вже кому як подобається.

Заключним етапом, буде висновок меню на сторінки вашого сайту, для цього там де вам необхідно вписуєте щось типу цього:

<div id="menu">
<ul>
<li><a title="заголовок" href="http://dbmast.ru/">Пункт 1</a></li>
<li><a title="заголовок" href="ваше посилання">Пункт 2</a></li>
<li><a title="заголовок" href="ваше посилання">Пункт меню 3</a></li>
<li><a title="заголовок" href="ваше посилання">Пункт меню 4</a></li>
<li><a title="заголовок" href="ваше посилання">Пункт меню 5</a></li>
<li><a title="заголовок" href="ваше посилання">Пункт меню 6</a></li>
<li><a title="заголовок" href="ваше посилання">Пункт меню 7</a></li>
</ul>
</div>

Бачите, друзі, код html мінімальний, вся структура меню це звичний список і все. Відповідно обзивайте пункти меню по своєму і прописуйте свої посилання для кожного пункту, так і не зайвим буде в атрибуті посилань title=”” розмістити короткий опис, тим самим при наведенні на певний пункт, стандартними засобами браузерів, будуть виводиться підказки, куди веде ця посилання, що вже саме по собі дуже зручно для ваших користувачів.

Завантажити

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

PS: Після написання статті з’явилися питання щодо створення такого меню з вкладеними підпунктами. Виникла така потреба у читачів, чому б і ні, трохи попрацювавши над CSS і зовсім трішки перетворивши html каркас, вийшло Вертикальне меню навігації CSS з підменю :

Меню с подменю