Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu dạng tab
URL: https://www.javascriptbank.com/tab-menu.html
Một trình đơn dạng tab rất cuốn hút người dùng.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu dạng tab
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-->