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

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

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

#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.jshover {
  background-color: #9ad5ff;
}

#menu li ul {
  display: none;
  position: absolute;
  padding: 5px 2px;
  width: 140px;
}

#menu li li a {
  width: 118px;
}

#menu li:hover ul,
#menu li.jshover ul {
  background-color: #003a63;
  display: block;
}

#menu li:hover li ul,
#menu li.jshover li ul {
  display: none;
  width: 140px;
}

#menu li:hover li:hover ul,
#menu li.jshover li.jshover ul {
  display: block;
}


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

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

<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>
</head>
<body>
<ul id="menu">
    <li><a href="/">Главная</a></li>
    <li><a href="/">Меню</a>
        <ul>
            <li><a href="/">Пункт 1</a></li>
            <li><a href="/">Пункт 2</a></li>
            <li><a href="/">Пункт 3</a></li>
        </ul>
    </li>
</ul>
</body>

Заметим, что наше меню нормально работает во всех браузерах, включая IE6, который поддерживает параметр hover только для ссылок. Это так, благодаря следующему скрипту в нашем коде:
<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! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



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

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

Публикацию посмотрели 37453 раз(а) и написали 13 комментариев.
Подписаться на канал 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!