کد منوی دارای تب که با بردن ماوس روی تب های آن نشان داده می شود

2 level horizontal tab menu

• Home
• Tutorials ▼
• References ▼
• JavaScripts

این کد را در قسمت head صفحه قرار دهید یا هر کدام را جدا درون فایل های جدایی قرار دهید:

<style> .basictab{ padding: 3px 0; margin-left: 0; font: bold 12px Verdana; border-bottom: 1px solid gray; list-style-type: none; margin-bottom: 0; direction:rtl; text-align: right; /*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; border-radius:5px 5px 0px 0px; -moz-border-radius:5px 5px 0px 0px; -ms-border-radius:5px 5px 0px 0px; -webkit-border-radius:5px 5px 0px 0px; -o-border-radius:5px 5px 0px 0px; -khtml-border-radius:5px 5px 0px 0px; } .basictab li a:visited{ color: black; } .basictab li a:hover{ background-color: #eee; color: black; } .basictab li a:active{ color: black; } .basictab li.selected a{ /*selected tab effect*/ position: relative; top: 1px; padding-top: 4px; background-color: #eee; 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; text-align:right; border-radius:0px 0px 5px 5px; -moz-border-radius:0px 0px 5px 5px; -ms-border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px; -o-border-radius:0px 0px 5px 5px; -khtml-border-radius:0px 0px 5px 5px; } * html .submenustyle{ /*IE only width definition*/ width: 100%; } .submenustyle a{ border-left: 1px dashed black; padding: 1px 5px; text-decoration: none; transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -khtml-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; } .submenustyle a:hover{ background-color: #eee; padding-top:2px; } </style> <script> 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[i]).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[i].getAttribute("rel")){ menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu if (menuitems[i].className=="selected") showsubmenu(tabid, menuitems[i].getAttribute("rel")) menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){ showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel")) } } } } </script>

این کد را هر جا که خواستید منو به نمایش در آید بگذارید (در قسمت body):

<ul id="maintab" class="basictab"> <li><a href="http://www.moisrex.rozblog.com">Home</a></li> <li class="selected" rel="tutorials"><a href="#">Tutorials &#9660;</a></li> <li rel="references"><a href="#">References &#9660;</a></li> <li><a href="#">JavaScripts</a></li> </ul> <div id="references" class="submenustyle"> <a href="#">JavaScript Reference</a> <a href="#">DOM Reference</a> <a href="#">CSS Reference</a> </div> <div id="tutorials" class="submenustyle"> <a href="#">JavaScript Tutorials</a> <a href="#">DHTML & CSS Tutorials</a> <a href="#">Web Building tutorials</a> <a href="#">htaccess Tutorial</a> </div> <a style="display:none" href="http://moisrex.rozblog.com/">2 level horizontal tab menu</a><a style="display:none" href="http://moisrex.r98.ir/">کد منوی دارای تب که با بردن ماوس روی تب های آن نشان داده می شود</a><script>initalizetab("maintab")</script>