Основное меню

Создание горизонтального меню

Первоначально для создания меню нам потребуется HTML каркас. Создаем HTML-страницу и вносим туда вот этот DIV-блок:

<div class="tmenu">
<a href="http://website-name.ru/" class="active"><span>Главная</span></a>
<a href="http://website-name.ru/"><span>Музыка</span></a>
<a href="http://website-name.ru/"><span>Книги</span></a>
<a href="http://website-name.ru/"><span>Игры</span></a>
<a href="http://website-name.ru/"><span>Программы</span></a>
<a href="http://website-name.ru/"><span>Фильмы</span></a>
<a href="http://website-name.ru/"><span>Картинки</span></a>
</div>

Первая ссылка с названием "Главная" имеет класс "active", из этого следует что этот элемент меню будет отображаться как активный. Если вы хотите чтобы активным был другой элемент вашего меню, то просто переместите class="active" в другой элемент.
Каркас мы подготовили, теперь нужно задать стили для нашего меню. В файле style.css пишем этот код:

div.tmenu {
height: 66px;
width: 693px;
float: right; /* к какому краю выровнять меню, принимаемые значения  left | right  */
background: #0c1c3b url(images/background.JPG) no-repeat left top;
}

Теперь оформим элементы меню, продолжаем редактирование style.css

div.tmenu a {
display: block;
height: 66px;
width: 97px;
float: left;
color: #FFFFFF;
font-weight: bold;
text-align: center;
text-decoration: none;
margin-right: 2px;
outline: none;
}
div.tmenu a span {
display: block;
color: #FFFFFF;
padding-top: 34px;
font: bold 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

Задаем стили для элементов, которые будут подпрыгивать при наведении мышки:

div.tmenu a span {
display: block;
color: #FFFFFF;
padding-top: 34px;
font: bold 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
div.tmenu a:hover {
color: #FFFFFF;
text-decoration: none;
background: url(images/link-active.PNG) no-repeat left top;
}
div.tmenu a:hover span {padding-top: 24px;}
div.tmenu a.active:hover span {padding-top: 34px;}

И последнее, задаем стиль для активного элемента нашего меню:

div.tmenu a.active {
color: #FFFFFF;
text-decoration: none;
background: url(images/link-click.JPG) no-repeat left top;
}

На этом создание горизонтального меню законченно. Все исходные материалы можно скачать ниже.

Скачать файл
размер файла: 38,41 Kb
cкачиваний: 43

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.