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

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

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css"scriptcode">#menu,
#menu ul {
  border: 1px solid #b4b4b4;
  background: #003a63;
  float: left;
  width: 300px;
}

#menu li {
  float: left;
  position: relative;
  background: #003a63;
}

#menu a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 125px;
  padding: 3px 10px;
}

#menu a:hover {
  color: #000;
  background-color: #9ad5ff;
}

#menu li:hover,
#menu li.js"scriptcode"><html>
<head>
<link rel="stylesheet" href="style.css"scriptcode"><script type="text/javascript">
<!--//--><![CDATA[//><!--
    jsHover = function() {
        var hEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0, len=hEls.length; i<len; i++) {
            hEls[i].onmouseover=function() { this.className+=" jshover"; }
            hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
        }
    }
    if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></script>


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


Пояснения к коду:
display: none; - запрет показа элемента
display: block; - показ элемента блоком (при наведении)
Остальное разобрано в предыдущих уроках


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


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



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

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

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

«    Июль 2019    »
ПнВтСрЧтПтСбВс
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!