Красивое вертикальное CSS меню

Anton.A · 29 Ноя 2012

Доброго времени суток всем жителям деревушки PI. Сегодня я бы хотел вам представить свою первую работу с кодами CSS и HTML. Это очень простое вертикальное меню в красно-зелёных тонах.

Вот DEMO(не реклама):

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

HTML код:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" href="vmenu1.css" type="text/css"/>
<title>Вертикальное меню by Anton.A</title>
</head>
<body style="background: url(bg166.jpg);">

  <div align="center">
    <div id="main_menu">
      <div class="top_button"><a href="#">Главная</a></div>
      <div class="mid_button"><a href="#">Форум</a></div>
      <div class="mid_button"><a href="#">Блог</a></div>
      <div class="bot_button"><a href="#">Гостевая</a></div>
    </div>
  </div>
</body>
</html>

CSS код:

PHP:

#main_menu{width: 268px; margin: 0; padding: 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 13px; text-align: center; line-height: 30px;}
#main_menu a{display: block; color: white; text-decoration: none;}

.top_button a{background: url(images/bt.png); height: 30px; width: 238px; padding: 10px 15px 6px 15px;}
.mid_button a{background: url(images/bm.png); height: 30px; width: 238px; padding: 7px 15px;}
.bot_button a{background: url(images/bb.png); height: 30px; width: 238px; padding: 6px 15px 10px 15px;}

.top_button a:hover{background: url(images/bt.png) bottom;}
.mid_button a:hover{background: url(images/bm.png) bottom;}
.bot_button a:hover{background: url(images/bb.png) bottom;}

Вот. Довольно таки простой код. Если кому нужно сделать в других тонах или ещё что-либо прикрепить к стилю этого меню, то обращайтесь в Skype: Anton.A
Работаю сейчас бесплатно т.к только набираю опыт. Бесплатно значит за плюсы

Переход в группу "Пользователь"

Красивое вертикальное CSS меню

Anton.A

Изучающий