Классическое вертикальное меню

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Классическое вертикальное меню, которое может быть вмонтировано в большинство конструкций сайтов. Заголовки меню создаются с помощью тегов <h3>, а строки меню - обычным порядком. Используется изображение.

Демо-пример

Установка на сайт:

1. Скопировать и вставить код со стилями в файл стилей сайта или в раздел head своего сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">
.urbangreymenu{
width: 220px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(img/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 18px; /*link text is indented 18px*/
text-decoration: none;
text-align: left;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
</style>

2. Этот участок кода скопируйте и вставьте в раздел body своего сайта, где будет находиться меню:


<div class="urbangreymenu">

<h3 class="headerbar">CSS Библиотека</h3>
<ul>
<li><a href="#">Горизонтальное CSS Меню</a></li>
<li><a href="#">Вертикальное CSS Меню</a></li>
<li><a href="#">Картинки CSS</a></li>
<li><a href="#">Формы CSS</a></li>
<li><a href="#">Блоки DIV</a></li>
<li><a href="#">Ссылки и кнопки</a></li>
<li><a href="#">Другое</a></li>
<li><a href="#">Контакты</a></li>
</ul>

<h3 class="headerbar">Комплект JavaScript</h3>
<ul>
<li><a href="#">Бесплатные Java-скрипты</a></li>
<li><a href="#">Учебники Java-скрипт</a></li>
<li><a href="#">Java-Script ссылки</a></li>
<li><a href="#">DHTML и CSS</a></li>
<li><a href="#">Web-дизайн</a></li>
<li><a href="#">Java-апплеты</a></li>		
</ul>

</div>

Впишите свои URL и названия ссылок.

Сохраните изображениe в папку img, которая должна находиться в одной директории с индексным файлом:

Удачи! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки