Представляю Вам очередной урок CSS. В нём, я расскажу о том, как создать активное горизонтальное меню с пояснениями.
Итак, попробуем сделать это...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
/* ============================================================= © 2008 Prizrak13 CSS (Russian CSS ) http://www.good-ok.at.uaУрок CSS Создание меню с пояснениями. 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>→ Пояснения по первому пункту</span></a></li> <li><a href="#"><strong>Пункт 2</strong> <span>→ Пояснения по второму пункту</span></a></li> <li><a href="#"><strong>Пункт 3</strong> <span>→ Пояснения по третьему пункту</span></a></li> </ul> </body> </html>
4) Сохраняем и смотрим, что получилось.
| 
Главная