Создаем вертикальное меню для сайта

 

В этом посту мы рассмотрим процесс создания вертикального css меню для сайта из списка. Сразу скажу, что если вы собрались собственноручно написать меню для своего сайта, то вы должны обладать знаниями html и CSS. Иначе вы ничего не поймете. Так что если не обладаете данными знаниями, то лучше воспользуйтесь другим способом, к примеру существуют специальные программы для создания вертикального и горизонтального меню.

Создаем вертикальное меню для сайта

Начнем! Для начала, напишем html код нашего меню.

<div id=»css_menu»>
<ul id=»menu»>
<li><a href=»/»>Главная</a></li>
<li><a href=»/»>Карта сайта</a></li>
<li><a href=»/»>Обратная связь</a></li>
<li><a href=»/»>Помощь</a></li>
</ul>
</div>

Я думаю заметили, что список помещен в блок div со своим уникальным стилем. В дальнейшем это пригодиться, что бы настроить вид нашего меню, не затрагивая другие элементы страницы. Html код написали, приступим к таблице стилей. Пропишем сначала стиль для блока div.

#css_menu {width:200px; font-family:Verdana;font-size:14px;}

width — ширина блока 200 пикселей
font-family — шрифт «Verdana»
font-size — высота букв 14 пикселей

Далее напишем стиль для списка.

#menu {list-style:none; padding:0px; margin:0px;}

list-style — убираем кружочки в списке
padding, margin — убираем отступы, которые идут по умолчанию в списке

Зададим общий стиль для всех ссылок.

#css_menu li a {text-decoration:none;display:block;height:25px;width:200px;}

text-decoration — убираем подчеркивание у всех ссылок
display — изменяем режим отображения ссылок
height, width — задаем ширину и высоту для всех ссылок

Теперь напишем стили для активной, посещенной и обычной ссылок.

#css_menu li a:link, #css_menu li a:visited {
color:#000000;
font-weight:bold;
background: url(‘http://gothic-blog.3dn.ru/files/ud.png’) no-repeat;
padding: 5px 0 0 5px;}

#css_menu li a:hover {
color:#444444;
background: url(‘http://gothic-blog.3dn.ru/files/ud2.png’) no-repeat;
padding: 5px 0 0 5px;}

color — цвет ссылки
font-weight — делаем текст жирным
background — задаем фон
padding — делаем отступы слева и справа

Все, готово! Можно теперь посмотреть в действии наше вертикальное меню для сайта: Посмотреть ->

Вот такое получилось css меню. Как видите создание вертикального меню задача не сложная. Стоит лишь знать html и css. Ну и не помешало бы пользоваться каким-нибудь графическим пакетом, к примеру Photoshop, если вы конечно хотите что бы меню было графически оформленным и более красивым.

Вы можете скачать, для ознакомления, созданное в ходе вертикальное меню.

Скачать css_menu

  1. 2 года назад

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *