Выпадающее меню для uCoz
- Добавил: Scripts_For_uCoz
- Дата: 2024-11-23, 11:17 PM
- Комментариев: 0
- Просмотров: 4282
Скриншот материала «Выпадающее меню для uCoz»
Установка:
1) Это мы ставим в CSS
Код:
.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>:
Код:
<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) А вот это само меню:
Код:
<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 - Scripts for uCoz
- Источник:
Будьте внимательны! Этот материал «Выпадающее меню для uCoz» из раздела «Скрипты для uCoz - Scripts for uCoz» является уникальной собственностью проекта www.ucozzz.ru, поэтому,
при частичном или полном копировании, Вы обязаны установить ссылку на наш портал, как источник материала.
Похожие материалы
