Horyzontalne menu
Zawartość sekcji HEAD:
<script type="text/javascript" src="/2leveltab.js"></script> |
plik stylów 2leveltab.css
.basictab{ padding: 3px 0; margin-left: 0; font: bold 12px Verdana; border-bottom: 1px solid gray; list-style-type: none; margin-bottom: 0; text-align: left; /*set to left, center, or right to align the menu as desired*/ } .basictab li{ display: inline; margin: 0; } .basictab li a{ text-decoration: none; padding: 3px 7px; margin-right: 2px; border: 1px solid gray; border-bottom: none; background-color: white; color: black; } .basictab li a:visited{ color: black; } .basictab li a:hover{ background-color: #dbffff; color: black; } .basictab li a:active{ color: black; } .basictab li.selected a{ /*selected tab effect*/ position: relative; top: 1px; padding-top: 4px; background-color: #dbffff; color: black; } .submenustyle{ padding: 2px 1px; border: 1px solid black; border-top-width: 0; width: auto; display: none; filter:alpha(opacity=0); -moz-opacity:0; } * html .submenustyle{ /*IE only width definition*/ width: 100%; } .submenustyle a{ border-right: 1px dashed black; padding: 1px 5px; text-decoration: none; } .submenustyle a:hover{ background-color: #ebffff; } |
plik javascript 2leveltab.js
var mastertabvar=new Object() mastertabvar.baseopacity=0 mastertabvar.browserdetect="" function showsubmenu(masterid, id){ if (typeof highlighting!="undefined") clearInterval(highlighting) submenuobject=document.getElementById(id) mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : "" hidesubmenus(mastertabvar[masterid]) submenuobject.style.display="block" instantset(mastertabvar.baseopacity) highlighting=setInterval("gradualfade(submenuobject)",50) } function hidesubmenus(submenuarray){ for (var i=0; i<submenuarray.length; i++) document.getElementById(submenuarray).style.display="none" } function instantset(degree){ if (mastertabvar.browserdetect=="mozilla") submenuobject.style.MozOpacity=degree/100 else if (mastertabvar.browserdetect=="ie") submenuobject.filters.alpha.opacity=degree } function gradualfade(cur2){ if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99) else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 else if (typeof highlighting!="undefined") //fading animation over clearInterval(highlighting) } function initalizetab(tabid){ mastertabvar[tabid]=new Array() var menuitems=document.getElementById(tabid).getElementsByTagName("li") for (var i=0; i<menuitems.length; i++){ if (menuitems.getAttribute("rel")){ menuitems.setAttribute("rev", tabid) //associate this submenu with main tab mastertabvar[tabid][mastertabvar[tabid].length]=menuitems.getAttribute("rel") //store ids of submenus of tab menu if (menuitems.className=="selected") showsubmenu(tabid, menuitems.getAttribute("rel")) menuitems.getElementsByTagName("a")[0].onmouseover=function(){ showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel")) } } } } |
BODY:
<ul id="maintab" class="basictab"> |
Możesz również zawartość poszczególnych podmenu wyświetlane automatycznie po załadowaniu strony, dodając klasy CSS obok atrybutów
<li rel="references" class="selected"><a href="#">References ▼[/url]</li> |