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

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

Меню на основе CSS, без использования изображений. Поддержка вставки заголовков в качестве разделителей между группами ссылок меню.

Демо-пример

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

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

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


<style type="text/css">
#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
text-align: left;
}

#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}

* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
text-align: left;
}

#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
</style>

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


<div id="ddblueblockmenu">
<div class="menutitle">Интернет</div>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Хостинг</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Форум</a></li>
</ul>
</div>

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

Меню очень простое и его установка не представляет сложности для начинающего web-мастера. Пока! L.M.

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

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