Статистика Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » 2009 » Март » 22 » Выпадающее меню
Вот тут можно посмотреть пример . Установка: 1) Это мы ставим в CSS Code
.menu {padding:0; margin:0; width:200px; border-top: 1px solid #ccc;} .menu li {background-color:#ebebeb; margin:0; padding: 6px 0; display: block; position: relative; border: 1px solid #ccc; border-width: 0px 1px 1px 1px; list-style: none;} * html .menu li {background-color:#ebebeb; margin:0; padding: 3px 0; display: block; position: relative; border: 1px solid #ccc; border-width: 0px 1px 1px 1px; list-style: none;} .menu li a {display: block; position: relative; text-decoration: none; padding-left: 6px; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#aaaaaa; margin:0;} .menu li ul {display: none; position: absolute; width:200px; left:198px; margin:0; padding:0; top: -1px; border-top: 1px solid #ccc;} .menu ul ul { left: 198px; } .menu li:hover ul ul, .menu li:hover ul li:hover ul ul, .menu li.sfHover ul ul, .menu li.sfHover ul li.sfHover ul ul { display: none; } .menu li:hover ul, .menu li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul, .menu li.sfHover ul, .menu li.sfHover ul li.sfHover ul, .menu li.sfHover ul li.sfHover ul li.sfHover ul { display: block; } .menu li:hover, li.sfHover { background: #E3E3E3; } .menu a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;color:#999999;} .in {background-image: url(arrow2.gif);background-position: right;background-repeat: no-repeat;}
2) Это ставим между <head> и </head>: Code
<script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script>
3) А вот это само меню: Code
<ul class="menu" id="menu"> <li><a href='#'>Первый пункт</a></li> <li class="in"><a href='#'>Второй пункт</a> <ul> <li><a href='#'>Первый уровень вложения</a></li> <li class="in"><a href='#'>Первый уровень вложения</a> <ul> <li><a href='#'>Второй уровень вложения</a></li> <li><a href='#'>Второй уровень вложения</a></li> </ul> </li> </ul> </li> <li><a href='#'>Point</a></li> <li><a href='#'>Point</a></li> </ul>
Категория: скрипты для ucoz сайта |
Просмотров: 1413 |
Добавил: qpPoru
| Рейтинг: 5.0 /1
Всего комментариев: 8
Порядок вывода комментариев:
По умолчанию
Сначала новые
Сначала старые
6
ress
(07.04.2009 14:14)
0
а куда менюшку кидать то??Сорри я немного далековат от юкоз)))
5
миха
(26.03.2009 17:17)
0
А где именно эти Хеады
0
да, цвета нада под себя настраивать
0
Да не зачто!
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]