Onglets tabs Menu horizontal mouseover

Onglets tabs Menu vertical Onglets du menu (mouseover) C'est un menu mouseover onglets. Déplacez la souris sur des liens désigné, et d'autres "sous-liens" apparaissent en dessous. Pensez-y comme un inline deux menus niveau. Nous avons volontairement fait ce script avec un montant minimum de style, de sorte que vous pouvez personnaliser son apparence même. À titre d'exemple, les principaux liens pourraient être remplacés par "l'onglet" images à la place.

• DEMO
• HTML CODE
• SCRIPT CODE

COPIER COLLER LES CODES ET MODIFIER LES A VOTRE STYLE

JavaScript Kit | Freewarejava

<!-- START OF SCRIPT --> <!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) --> <a href="http://www.javascriptkit.com" onMouseover="showit(0)">JavaScript Kit</a> | <a href="http://freewarejava.com" onMouseover="showit(1)">Freewarejava</a><br> <!-- Edit the dimensions of the below, plus background color--> <ilayer width=500 height=35 name="dep1" bgColor="#B6E49C"> <layer name="dep2" width=500 height=20> </layer> </ilayer> <div id="describe" style="background-color:#000666;width:500px;height:400px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>

<script language="JavaScript1.2"> /* Tabs Menu (mouseover)- By Dynamic Drive For full source code and more DHTML scripts, visit http://www.dynamicdrive.com This credit MUST stay intact for use */ var submenu=new Array() //Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors. submenu[0]='<font size="3" face="times"color="blue"><b><a href="http://www.dynamicdrive.com">Scripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JS tutorials</a> | <a href="http://www.javascriptkit.com/javatutors/index.shtml">Advanced JS tutorials</a> | <a href="http://www.javascriptkit.com/java/">Applets</a> | <a href="http://www.javascriptkit.com/howto/">Web Tutorials</a></b></font>' submenu[1]='<font size="3" face="times" color="Yellow"><b><a href="http://freewarejava.com/applets/index.shtml">Applets</a> | <a href="http://freewarejava.com/tutorials/index.shtml">Tutorials</a> | <a href="http://freewarejava.com/javasites/index.shtml">Sites and Zines</a> | <a href="http://freewarejava.com/jsp/index.shtml">JSP</a></b></font>' //Set delay before submenu disappears after mouse moves out of it (in milliseconds) var delay_hide=500 /////No need to edit beyond here var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : "" function showit(which){ clear_delayhide() thecontent=(which==-1)? "" : submenu[which] if (document.getElementById||document.all) menuobj.innerHTML=thecontent else if (document.layers){ menuobj.document.write(thecontent) menuobj.document.close() } } function resetit(e){ if (document.all&&!menuobj.contains(e.toElement)) delayhide=setTimeout("showit(-1)",delay_hide) else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhide=setTimeout("showit(-1)",delay_hide) } function clear_delayhide(){ if (window.delayhide) clearTimeout(delayhide) } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } </script>