Вертикальное html меню

Учимся делать красивое вертикальное html меню без javascript и встраиваем в сайт.

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

Многие веб - мастера при создании сайта не хотят тратить время на создание некоторых элементов сайта которые уже существуют, только осталось подогнать под стиль сайта. Сейчас я расскажу вам как сделать красивое вертикальное html меню без использования javascript, и встроить его в ваш сайт.

Для начала вставим следующий код на то место где вы хотели бы разместить меню сайта:

<div id="container">
<div id="firstcol">
<div id="menu">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="Уроко по PHP">php уроки</a></li>
<li><a href="#3" title="Учим HTML разметку">html уроки</a></li>
<li><a href="#4" title="всё о css стилях">css уроки</a></li>
<li><a href="#5" title="Введение в СУБД MySQL">MySQL уроки</a></li>
<li><a href="#5" title="Уроки по Turbo Pascal">turbopascal уроки</a></li>
</ul>
</div>

Данный код представляет из себя само основание меню, так скажем каркас нашего меню для сайта.
Как вы могли заметить, само меню будет вертикальным.
Далее измените ссылки в коде меню на ваши. Заменяем #1 (так же с следующими #2, #3 ...) на вашу ссылку и даём ей название.

Теперь посмотрев меню в браузере, возможно оно будет выглядеть не так как бы вам хотелось.
Приступим к заданию стиля для нашего вертикального html меню, но для начала прикрепите к вашей странице на которой будет располагаться меню css стили.
Что бы прикрепить к странице css стили нужно прописать между тегами HEAD следующую строку:

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

Теперь создадим сам файл в котором и будут наши стили для меню. В том же каталоге где расположена страница сайта создайте файл style.css

Запишите данный код в созданный style.css:

#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu li a {
height: 32px;
height: 24px;
text-decoration: none;
} 

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #26370A;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}

Рассмотрим за что отвечают отдельные стили:

width: 200px; отвечает за ширину вашего меню (задаётся как в пикселях так и в процентах)

border-color: #94AA74; задаёт цвет фона меню.

margin: 10px; размер отступов от родительского блока.

Данными стилями вы сможете установить меню в ваш сайт, так как вам хотелось.

Я рассказал как установить первое меню, остальные вы сможете без проблем установить сами, так как различие только в картинках которые вы сможете скачать по приведённой ниже ссылке.

Картинки должны лежать в папке images.

Для того что бы скачать вертикальное html меню для сайта, перейдите по ссылке
вертикальное html меню для сайта

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Синий экран смерти, коды ошибок

Белые методы продвижения сайта

Создать собственный блог или сайт не так просто как кажется

Как установить windows vista с диска на ноутбук

Способы завязывания шарфа в картинках

Комментарии:

Добавленно - 2011-10-22

Павел пишет:

А как сделать если у меня на страничке уже установлено одно меню! и я хочу установить ещё одно! а стили пересекаються и получается лиж бы что! как сделать чтобы стили непересекались друг с другом???

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =