Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 9. Создание меню с пояснениями
Не нравится(-) 28 Нравится(+)
19-04-2008, 16:29 - GZ Design (Уроки CSS)
Урок CSS 9. Создание меню с пояснениями

Представляю Вам очередной урок CSS. В нём, я расскажу о том, как создать активное горизонтальное меню с пояснениями.
Итак, попробуем сделать это...

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

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №9 Создание меню с пояснениями.
style.css - Набор стилей для урока
=============================================================
*/

ul#menu {
  margin: 5px; /* Отступ для кнопок */
  list-style-type : none;
  font-size: 13px; /* Размер шрифта в кнопках */
}

ul#menu li {
  margin-bottom: 5px; /* Отступ между кнопками */
}

ul#menu a {
  position: relative;
  width: 150px; /* Ширина кнопки */
  height: 2.5em; /* Высота кнопки */
  display: block; /* Отображение кнопок (НЕ МЕНЯТЬ) */
  padding: 5px; /* Отступ для текста в кнопках */
  padding-right: 0; /* Правый отступ для кнопок */
  border: 1px solid #002948; /* Задание границы кнопки */
  background-color: #c4e5ff; /* Задание фона кнопки */
  color: #000; /* Цвет шрифта в кнопках */
  text-decoration: none; /* Отмена подчёркивания ссылок */
  font-weight: bold; /* Полужирный шрифт */
  cursor: pointer; /* Задание типа курсора */
}

ul#menu a span {
  position: absolute; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */
  top: -10000px; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */
  left: -10000px;/* Задание позиции подсказок (НЕ МЕНЯТЬ) */
  display: block; /* Отображение подсказок (НЕ МЕНЯТЬ) */
  width: 250%; /* Длинна поля подсказок */
  height: 2.5em; /* Задание высоты поля подсказок */
  background-color: #c4e5ff; /* Задание фона поля подсказок */
  border: 1px solid #002948; /* Задание границы поля подсказок */
  border-left: 0; /* Отключение левой границы */
  padding: 5px; /* Отступ для текста подсказки */
  padding-left: 25px; /* Отступ для текста подсказки */
  cursor: pointer; /* Задание типа курсора */
  color: #333; /* Цвет шрифта в подсказках */
}

ul#menu a:hover, ul#cmd a:focus, ul#cmd a:active {
  background: #c4e5ff; /* Задание фона подсказки */
}

ul#menu a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
  top : -1px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */
  left : 80px;  /* Задание поля подсказки (НЕ МЕНЯТЬ) */
}


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

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<ul id="menu">
<li><a href="#"><strong>Пункт 1</strong>
    <span>&rarr; Пояснения по первому пункту</span></a></li>
<li><a href="#"><strong>Пункт 2</strong>
    <span>&rarr; Пояснения по второму пункту</span></a></li>
<li><a href="#"><strong>Пункт 3</strong>
    <span>&rarr; Пояснения по третьему пункту</span></a></li>
</ul>
</body>
</html>


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

Идея: Mike Cherim
Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.x; Oprea 9.xx

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


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



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

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

Публикацию посмотрели 20527 раз(а) и написали 10 комментариев.
Подписаться на канал 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
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!