Version complète: jsB@nk » Menu » Navigation » Onglet Menu
URL: https://www.javascriptbank.com/tab-menu.html
C'est une belle, une liste fondée sur l'onglet JavaScript menu script. Alors que le JavaScript menu a besoin d'un JavaScript permis navigateur pour afficher correctement, le menu est tout simplement le contenu HTML, ce qui rend le contenu tel que des Liens au sein de search les moteurs.
Version complète: jsB@nk » Menu » Navigation » Onglet Menu
URL: https://www.javascriptbank.com/tab-menu.html
<style type="text/css">#mainMenu{background-color: #FFF;/* Background color of main menu */font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;/* Fonts of main menu items */font-size:1.2em;/* Font size of main menu items */border-bottom:1px solid #000000;/* Bottom border of main menu */height:30px;/* Height of main menu */position:relative;/* Don't change this position attribute */visibility: hidden;}#mainMenu a{padding-left:5px;/* Spaces at the left of main menu items */padding-right:5px;/* Spaces at the right of main menu items */font-weight: bold;/* Don't change these two options */position:absolute;bottom:-1px;}#submenu{font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;/* Font of sub menu items */background-color:#E2EBED;/* Background color of sub menu items */visibility: hidden;width:100%;/* Don't change this option */}html>body #clearmenu{ /* non IE browsers menu bottom spacing */margin-bottom: 2px;}#submenu div{white-space:nowrap;/* Don't change this option */}/*Style attributes of active menu item */#mainMenu .activeMenuItem{/* Border options */border-left:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #000000;background-color: #E2EBED;/* Background color */cursor:pointer;/* Cursor like a hand when the user moves the mouse over the menu item */}/*Style attributes of inactive menu items*/#mainMenu .inactiveMenuItem{color: #000;/* Text color */cursor:pointer;/* Cursor like a hand when the user moves the mouse over the menu item */}#submenu a{text-decoration:none;/* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */padding-left:5px;/* Space at the left of each sub menu item */padding-right:5px;/* Space at the right of each sub menu item */color: #000;/* Text color */}#submenu a:hover{color: #FF0000;/* Red color when the user moves the mouse over sub menu items */}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">/************************************************ Tab Menu- By Alf Magne Kalleland www.dhtmlgoodies.com* Script featured and available at Dynamic Drive: http://www.dynamicdrive.com/* This notice must stay intact for use***********************************************/var topMenuSpacer = 15; // Horizontal space(pixels) between the main menu itemsvar activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseovervar leftAlignSubItems = false; // left align sub items tvar activeMenuItem = false;// Don't change this option. It should initially be falsevar activeTabIndex = 0;// Index of initial active tab(0 = first tab) - If the value below is set to true, it will override this one.var rememberActiveTabByCookie = true;// Set it to true if you want to be able to save active tab as cookie/*These cookie functions are downloaded from http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm*/function Get_Cookie(name) { var start = document.cookie.indexOf(name+"="); var len = start+name.length+1; if ((!start) && (name != document.cookie.substring(0,name.length))) return null; if (start == -1) return null; var end = document.cookie.indexOf(";",len); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(len,end)); } // This function has been slightly modifiedfunction Set_Cookie(name,value,expires,path,domain,secure) { expires = expires * 60*60*24*1000;var today = new Date();var expires_date = new Date( today.getTime() + (expires) ); var cookieString = name + "=" +escape(value) + ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + ( (path) ? ";path=" + path : "") + ( (domain) ? ";domain=" + domain : "") + ( (secure) ? ";secure" : ""); document.cookie = cookieString; }function showHide(){if(activeMenuItem){activeMenuItem.className = 'inactiveMenuItem'; var theId = activeMenuItem.id.replace(/[^\d]/g,'');document.getElementById('submenu_'+theId).style.display='none';}activeMenuItem = this;this.className = 'activeMenuItem';var theId = this.id.replace(/[^\d]/g,'');document.getElementById('submenu_'+theId).style.display='block';if(rememberActiveTabByCookie){Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);}}function initMenu(){var mainMenuObj = document.getElementById('mainMenu');var subMenuObj = document.getElementById('submenu'); //DD added linemainMenuObj.style.visibility=subMenuObj.style.visibility="visible" //DD added linevar menuItems = mainMenuObj.getElementsByTagName('A');if(document.all){mainMenuObj.style.visibility = 'hidden';document.getElementById('submenu').style.visibility='hidden';}if(rememberActiveTabByCookie){var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';cookieValue = cookieValue.replace(/[^\d]/g,'');if(cookieValue.length>0 && cookieValue<menuItems.length){activeTabIndex = cookieValue/1;}}var currentLeftPos = 15;for(var no=0;no<menuItems.length;no++){if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;menuItems[no].id = 'mainMenuItem' + (no+1);menuItems[no].style.left = currentLeftPos + 'px';currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer; if(no==activeTabIndex){menuItems[no].className='activeMenuItem';activeMenuItem = menuItems[no];}else menuItems[no].className='inactiveMenuItem';if(!document.all)menuItems[no].style.bottom = '-1px';}var mainMenuLinks = mainMenuObj.getElementsByTagName('A');var subCounter = 1;var parentWidth = mainMenuObj.offsetWidth;while(document.getElementById('submenu_' + subCounter)){var subItem = document.getElementById('submenu_' + subCounter);if(leftAlignSubItems){// No action}else{var leftPos = mainMenuLinks[subCounter-1].offsetLeft;document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';subItem.style.position ='absolute';if(subItem.offsetWidth > parentWidth){leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth); }subItem.style.paddingLeft = leftPos + 'px';subItem.style.position ='static';}if(subCounter==(activeTabIndex+1)){subItem.style.display='block';}else{subItem.style.display='none';}subCounter++;}if(document.all){mainMenuObj.style.visibility = 'visible';document.getElementById('submenu').style.visibility='visible';}document.getElementById('submenu').style.display='block';}window.onload = initMenu;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><!-- This is the start of the menu --><div id="mainMenu"><a>Products</a><a>Support</a><a>About us</a><a>Download</a></div><div id="submenu" align=left><!-- The first sub menu --><div id="submenu_1" align=left><a href="http://www.javascriptbank.com">Product 1</a><a href="http://www.javascriptbank.com">Product 2</a><a href="http://www.javascriptbank.com">Product 3</a></div><!-- Second sub menu --><div id="submenu_2" align=left><a href="http://www.javascriptbank.com">Phone</a><a href="http://www.javascriptbank.com">Email</a><a href="http://www.javascriptbank.com">Knowledge base</a></div><!-- Third sub menu --><div id="submenu_3" align=left><a href="http://www.javascriptbank.com">History</a><a href="http://www.javascriptbank.com">The team</a><a href="http://www.javascriptbank.com">Contact us</a><a href="http://www.javascriptbank.com">Visions</a></div><!-- Fourth sub menu --><div id="submenu_4" align=left><a href="http://www.javascriptbank.com">Patches</a><a href="http://www.javascriptbank.com">Whitepapers</a><a href="http://www.javascriptbank.com">Tab menu</a><a href="http://www.javascriptbank.com">Color picker</a><a href="http://www.javascriptbank.com">Window scripts</a><a href="http://www.javascriptbank.com">Games</a></div></div><br id="clearmenu" /><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->