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

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

Меню с использованием CSS и изображений. Красивое обрамление с наименованием подраздела. Фон каждой ссылки изменяется при наведении курсора мыши.

Демо-пример

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

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

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


<style type="text/css">
div.moduletable h3, div.module h3 {
	font-weight: bold;
	font-size: 1em;
	margin-bottom: 17px;
	text-align: center;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	text-indent: -5px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 10px;
}

div.module {
	width: 220px;
	background: url(img/mod_mid.png) repeat-y;
	margin-bottom: 7px;
	padding-right: 5px!important;
	padding-right: 15px;

}

div.module div {
  background: url(img/mod_bot.png) bottom left no-repeat;
}

div.module div div {
	background: url(img/mod_top.png) top left no-repeat;
	padding-top: 7px;
	padding-right: 5px;
	padding-bottom: 15px;
	padding-left: 6px;
}

div.module div div div {
  background: none;
  padding: 0;
  width: auto !important;
  width: 100%; 
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	font-family: Tahoma, Helvetica, sans-serif;
	text-align: left;
	height: 23px;
	line-height: 23px;
	width: 207px;
	text-decoration: none;
	margin-top: 1px;
	margin-bottom: 1px;
	text-indent: 10px;
	background-image: url(img/mainleve.png);
	background-repeat: no-repeat;
	background-position: left;
}

a.mainlevel:hover {
	background-image: url(img/mainlevf.png);
}

</style>

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


<div class="module">
<div>
<div>
<h3>Компьютер</h3>
<table width="100%">
<tr align="left"><td><a href="#" class="mainlevel">Главная</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel">Программы</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel">Web-деньги</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel">Электронные книги</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel">Оптимизация</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel">Обучающие курсы</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel">Контакты</a></td></tr>
</table>				
</div>
</div>
</div>

Используемые изображения:

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

Два верхних изображения (mainleve.png и mainlevf.png) принимают участие в определении цветов строк меню. Цвета этих изображений можно легко поменять, например, в программе Paint Net, применив инструмент кисть и выбрав желаемый новый цвет.

C остальными изображениями такие эксперименты не пройдут, поэтому, нужно принять их в оригинальном виде.

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

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

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