Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 5. Создание вертикального меню
Не нравится(-) 47 Нравится(+)
Урок CSS 5. Создание вертикального меню

В уроке №5, вы сможете узнать, как при помощи CSS создать довольно простое и красивое вертикальное меню в виде кнопок.
Итак, приступим...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

body {
    font: bold 11px Tahoma;
    }

#menu ul {
    margin:0;
    padding:10px 10px 0 50px;
    }

#menu li {
    display:inline;
    margin:0;
    padding:0;
    }

#menu a {
    float:left;
    background:url("left.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }

#menu a span {
    float:left;
    display:block;
    background:url("right.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#FFF;
    }
    
#menu a:hover span {
    color:#FFF;
    background-position:100% -42px;
    }

#menu a:hover {
    background-position:0% -42px;
    }


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="menu">
  <ul>
    <li><a href="/"><span>Пункт 1</span></a></li>
    <li><a href="/"><span>Пункт 2</span></a></li>
    <li><a href="/"><span>Пункт 3</span></a></li>
    <li><a href="/"><span>Пункт 4</span></a></li>
    <li><a href="/"><span>Пункт 5</span></a></li>
    <li><a href="/"><span>Пункт 6</span></a></li>
  </ul>
</div>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Пояснения к коду:
display:inline; - Отключение выделения списков;
float:left; - Установка левой границы;
background-position:0% -42px; - Изменение поля фонового рисунка (Смещение на 42 пикселя вниз).


---------------------------------------
Правила копирования материалов урока
Демо
Скачать (zip, 4 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 63319 раз(а) и написали 20 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!