prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
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
 

Всё для вебмастера » Всё для uCoz » uCoz хаки » Создание выпадающего меню

Создание выпадающего меню


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Создание выпадающего меню.


Создание выпадающего меню


Итак, приступим...

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; - показ элемента блоком (при наведении)


Отредактировал ilja - 22 января 2010
Причина: Изменил категорию. Автор указывайте категории правильно
0
Просмотры: 8400 VIP ProWebber | Комментарии (8)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1nsdss

  • 23 января 2010 06:41
  • Регистрация: 10.01.2010
  • ICQ: --
  • Комментариев: 457
За миниурок конечно спасибо, но хотелось бы что бы ты показал как улучшить данное меню, т.е. например сделать выпадающие меню прозрачными например, края округлыми и т.д. Вот тогда будет респект.

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

0

#2sewa

  • 1 февраля 2010 13:56
  • Регистрация: 29.01.2010
  • ICQ: --
  • Комментариев: 47
Цитата: nsdss
Вот тогда будет респект.

ну не скажи, даже немного сыроватая новость заслуживает уважения.
кстати мне пригодится в будущем man_in_love

0

#3MDLES

  • 8 февраля 2010 11:49
  • Регистрация: 19.11.2009
  • ICQ: --
  • Комментариев: 10
круто у меня такоеже стоит)

0

#4oleg599

  • 12 февраля 2010 17:34
  • Регистрация: 7.10.2009
  • ICQ: --
  • Комментариев: 50
дану чё то не очень

дану чё то не очень

0

#5cineplex

  • 15 февраля 2010 20:29
  • Регистрация: 15.02.2010
  • ICQ: --
  • Комментариев: 4
так как я совсем новенький, не понимаю куда именно надо вставлять код? в каком именно месте? или не имеет значения?

0

#6Onspeed

  • 12 апреля 2010 20:31
  • Регистрация: 6.10.2009
  • ICQ: --
  • Комментариев: 60
Эта новость украдена с CSS School !! mad

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

0

#7sWitch

  • 11 ноября 2010 16:51
  • Регистрация: 11.11.2010
  • ICQ: --
  • Комментариев: 3
бред!!Он рашпельный

0

#8Ustim

  • 26 декабря 2010 16:41
  • Регистрация: 26.12.2010
  • ICQ: --
  • Комментариев: 10
вот это то что я искал. Попробую счас поставить. Найс!!!

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Купить Астрагал перепончатый

где купить астрагал

isinga.ru


Ибп 60 ква

Техническая информация и описание ИБП Powerware

parus-electro.ru


Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки