• Страница 1 из 1
  • 1
Модератор форума: ๖ۣۜRanDomschik  
Выпадающее меню для uCoz
Scotch™
  • Дата: Пятница, 15-Май-2009, 20:21:02
  • Сообщение # 1
  • Администратор
  • 507 Сообщений:
  • 25 Награды:
Репутация: 49

Установка:
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) Это ставим между и :

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>

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


 
  • Страница 1 из 1
  • 1
Поиск: