На портале уже 570 , зарегистрировано 9843 и написано 803 .
Плавающие банеры скр...
просилка голосования
Скрипт Последние ком...
Гостевая книга
Требуется персонал!
Главная страница Архив всех материалов Скрипты для uCoz - Scripts for uCoz Выпадающее меню для uCoz

Выпадающее меню для uCoz

  • Добавил: Scripts_For_uCoz
  • Дата: 2017-11-20, 8:56 AM
  • Комментариев: 0
  • Просмотров: 3018
Скриншот материала «Выпадающее меню для 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>


Цвета настраиваем под себя!
Источник материала: studioad.ru


Будьте внимательны! Этот материал «Выпадающее меню для uCoz» из раздела «Скрипты для uCoz - Scripts for uCoz» является уникальной собственностью проекта www.ucozzz.ru, поэтому, при частичном или полном копировании, Вы обязаны установить ссылку на наш портал, как источник материала.
Похожие материалы
Материал «Выпадающее меню для uCoz» ещё никто не комментировал!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]