... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Слои в CSS. Выпадающее меню (стр.4)

 

 


В HTML-коде документа в любом месте можно написать код самих блоков подменю. Он прост, поскольку содержит только перечисление пунктов меню, и будет следующим:

<DIV id="main">
<A HREF="#">Новости</A>
<A HREF="#">Карта сайта</A>
</DIV>
<DIV id="movie">
<A HREF="#">Комедии</A>
<A HREF="#">Мелодрамы</A>
<A HREF="#">Tpиллepы</A>
<A HREF="#">Ужасы</A>
<A HREF="#">Фантастика</A>
<A HREF="#">Боевики</A>
<A HREF="#">Myльтфильмы</A>
</DIV>
<DIV id="issue">
<A HREF="#">О кино</A>
<A HREF="#">Об актерах</A>
<A HREF="#">О съемках</A>
</DIV>
<DIV id="survey">
<A HREF="#">Кино-новинки</A>
<A HREF="#">DVD-новинки</A>
</DIV>
<DIV id="forum">
<A HREF="#">Bxoд</A>
<A HREF="#">Регистрация</A>
</DIV>

Теперь блоки подменю созданы. Осталось ссылки внутри блоков оформить таким образом, чтобы они напоминали меню Windows. При наведении указателя мыши на меню вереде Windows пункт меню подсвечивается. Нечто подобное надо создать и нам. Пример аналогичного меню мы уже рассматривали ранее, когда изучали свойство display. Тут потребуется применить такой же трюк, а именно - задать для ссылок свойство display: block. Делаем мы это, во-первых, для того чтобы ссылка представляла собой не строчный, а структурный блок. Это позволит нам поменять фон ссылки при наведении указателя и создать эффект, подобный меню Windows. Во-вторых, структурные блоки автоматически располагаются вертикально, т.е. нам не придется добавлять принудительные разрывы строк <BR> после каждой ссылки.

В первую очередь следует записать стиль для ссылки в обычном состоянии, а затем запишем видоизмененный стиль для ссылок при наведении указателя мыши. Пользоваться лучше контекстным селектором. Для обычных ссылок правило будет следующим:


#main A {
color: Navy;
font-size: 12px;
display: block;
padding: 5px 3px 3px 10px;
text-decoration: none;
}

Размер шрифта тут также задаем в пикселях, чтобы размер шрифта совпадал с размером в основном меню. Убираем подчеркивание, задаем цвет и отступы сбоку. Следует отметить, что ссылки внутри всех блоков подменю будут совершенно одинаковы по внешнему виду, поэтому аналогичные правила можно записать для остальных блоков, но целесообразнее воспользоваться группировкой селекторов и объединить все правила в одно:

#main A, #movie A, #issue A, #survey A, #forum A {
color: Navy;
font-size: 12px;
display: block;
padding: 5px 3px 3px 10px;
text-decoration: none;
}

Теперь дело техники — написать стиль для псевдокласса : hover , который будет использоваться для ссылок внутри подменю. Он должен определять более темный цвет фона, и, чтобы текст не сливался с фоном, будем менять цвет текста на белый.

#main A:hover, #movie A:hover, #issue A:hover, #survey A:hover, #forum A:hover {
background: #6C6CB7;
color: #FFF;
}

После этих преобразований "подсветка" ссылок уже должна срабатывать, однако в окне браузера мы увидим все блоки подменю одновременно выведенными на экран и наложенными друг на друга. Мы располагали блоки на слоях по порядку от 1 до 5, поэтому в браузере эти блоки будут располагаться в том же порядке: блок #movie на втором слое располагается поверх блока #main на первом слое, блок #issue на третьем слое — поверх блока #movie и т.д.

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены