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;}
|
ПошукДрузі сайту |