WEB-нотатки - записник он-лайн

Горизонтальне меню з випадаючим списком
Створимо список:
Code
<ul id="nav">  
<li><a href="/">Блокнот</a>  
<ul>  
<li class="uz" style="border-bottom:1px solid #000000;"><a href="/">Головна сторінка</a></li>  
<li class="uz" style="border-bottom:1px solid #000000;"><a href="/">Форум</a></li>  
<li class="uz" style="border-bottom:1px solid #000000;"><a href="/">Файли</a></li>  
</ul>  
</li>  
<li><a href="/forum/">Графіка</a></li>  
<li><a href="">Сайт</a>  
<ul>  
<li class="uz" style="border-bottom:1px solid #000000;"><a href="">Сторінка</a></li>  
<li class="uz" style="border-bottom:1px solid #000000;"><a href="">Послуги</a></li>  
<li class="uz" style="border-bottom:1px solid #000000;"><a href="">написати лист</a></li>  
</ul>  
</li>  
</ul>

Скрипт меню:

Code
<script type="text/javascript">  
  jsHover = function() {  
  var hEls = document.getElementById("nav").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>

Стилі меню:
Code
#nav, #nav ul {list-style: none; margin: 0px auto; padding: 0; float: left; width: 100%;}  
#nav li {float: left; background: #2a2a2a; color: #ffffff;}  
#nav li a {color: #ffffff; }  
#nav li.uz {float: left; position: relative;background: none;}  
#nav a {text-decoration: none; display: block; width: 120px; height:25px; padding-top: 7px;}  
#nav a:hover {background: #000000; color: #fffffff;}  
#nav li:hover,  
#nav li.jshover {background: #000000;}  
#nav li ul {display: none; position: absolute; background: url(/horizmenubg.png);  
padding: 1px; width: 118px;}  
#nav li li a {width: 118px; background: none;}  
#nav li:hover ul,  
#nav li.jshover ul {display: block;}  
#nav li:hover li ul,  
#nav li.jshover li ul {display: none; width: 119px; top: 0px; left: 118px;}  
#nav li:hover li:hover ul,  
#nav li.jshover li.jshover ul {display: block;}

Категорія: JavaScript · Додав: mr_smith (27.11.2010)
Переглядів: 2060 · Рейтинг: 5.0/6
Всього коментарів: 0
Додавати коментарі можуть лише зареєстровані користувачі.
[ Реєстрація | Вхід ]

Пошук

Категорії

 
© pya.at.ua 2009 - 2024
Хостинг від uCoz