Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu dạng các tab
URL: https://www.javascriptbank.com/toggle-tab-menus-index.html
Hiệu ứng tạo một trình đơn với các mục chọn giống như các tab và mỗi tab sẽ có một màu khác nhau khi bạn rê hoặc nhấp chuột vào các mục chọn này.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu dạng các tab
URL: https://www.javascriptbank.com/toggle-tab-menus-index.html
<link rel="stylesheet" href="ttStyle.css" type="text/css"><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
<script language="JavaScript" type="text/javascript">// Toggle Tab Menus script - © 2004 Mircea Baldean// Version 1.1, release 09/01/2004var tabProp = new Array() /* Tab Menu properties: Add new tab menus using this conventiontabProp[No] = new Array("tabMenuNo","tabCaption","#tabBgColor","tabContNo") */tabProp[0] = new Array("tabMenu0","Lorem","#B3E7FF","tabCont0") tabProp[1] = new Array("tabMenu1","Odio","#FFFFCC","tabCont1") tabProp[2] = new Array("tabMenu2","Sed","#DFD5FF","tabCont2") tabProp[3] = new Array("tabMenu3","Viverra","#CCFFCC","tabCont3") //tabProp[4] = new Array("tabMenu4","Caption","#FFFFFF","tabCont4") //tabProp[5] = new Array("tabMenu5","Caption","#FFFFFF","tabCont5") //tabProp[6] = new Array("tabMenu6","Caption","#FFFFFF","tabCont6") //tabProp[7] = new Array("tabMenu7","Caption","#FFFFFF","tabCont7") //tabProp[8] = new Array("tabMenu8","Caption","#FFFFFF","tabCont8") //tabProp[9] = new Array("tabMenu9","Caption","#FFFFFF","tabCont9") // Set-up Parametersvar menuBgColorOff= "#EDEDED";//Default shaded colourvar menuBorderColor= "#AAAAAA";//Border colourvar menuWidth= "100px";//Tab Menu widthvar menuHeight= "24px";//Tab Menu heightvar menuSpacing= "20px";//Tab Manu spacingvar menuLeftOffset= "20px";//Offset first Tab Menuvar menuSelected= 0;//Selected Tab Menu by default: 0, 1, ...var menuBorderStyle = "1px solid";//Do not changevar menuVerifyWidth= 1;//Check to see if menus overflow content widthvar menuFontFamily = "Arial, Helvetica, sans-serif";//Font Family for tab menusvar menuFontSize= "13px";//Font Size for tab menusvar menuFontColorOff= "#0000FF";//Font Colour for un-selected tab menusvar menuFontColorOn= "#000000";//Font Colour for current menuvar contentWidth = "500px";//Content window widthvar contentHeight = "186px";//Content window heightvar contentFontFamily = "Arial, Helvetica, sans-serif";//Content window font familyvar contentFontSize= "13px";//Content window font sizevar contentFontColor= "#000000";//Content window font colourvar contentPadding= "4px";//Content window padding</script><script language="JavaScript" type="text/javascript" src="ttApi.js"></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="ttInitTabs();"><div id="tabHolder"> <div id="tabOffset"> </div> <script type="text/javascript" language="JavaScript">ttMenuDisplay();</script> <br style="clear: both;"> <div id="tabContent" class="tabContent"> <!-- Toggle Tab Content Start: name 'div' tags as 'tabCont0', 'tabCont1', 'tabCont2', ... --> <div id="tabCont0">Lorem ipsum dolor sit amet, et venenatis est nam blandit a, in velit aliquam libero amet faucibus mauris, ipsum turpis tellus urna, animi arcu neque etiam. Eaque tincidunt enim nibh aliquam magnis tellus. Duis faucibus ullamcorper volutpat eleifend pulvinar. Elit risus consectetuer vestibulum tincidunt et tempor, curabitur elementum aliquam, torquent non suscipit phasellus. Et enim autem est, lacus egestas elit dolor quam, eros viverra arcu massa fusce leo et, lectus massa lectus laoreet lacus vestibulum, volutpat metus quis.</div> <div id="tabCont1">Odio libero nemo, natoque velit. Urna pede. Fusce est sodales pellentesque aliquet. Pellentesque dui mauris nisi odio velit a, eu eget vulputate eu erat leo, pretium ut, luctus potenti libero ut magna per pellentesque. Id urna, vestibulum vel vestibulum risus lectus. Sed id. Felis tempor placerat, corporis sollicitudin, nisl eget quam tortor nibh aliquam cursus. Sodales tellus eros. Sed praesent feugiat, at fringilla in gravida magna tellus. Fermentum cras est mauris amet sed ultricies, donec luctus id, amet amet phasellus, et imperdiet eu arcu venenatis, velit pretium diam aliquam tellus.</div> <div id="tabCont2">Sed sit hendrerit. Taciti maecenas vitae porta aenean adipiscing. Nostra sodales, malesuada interdum tincidunt quis nulla proin, suscipit ut augue justo mi, ea neque, vulputate et fringilla euismod. Sed massa dictum vivamus. Ipsum interdum in, tincidunt in justo, ac commodo facilisis felis. Volutpat placerat at consequat accumsan, quis ante leo libero eget cras quisque, sapien ligula id ac ultricies eu pellentesque, orci facilisi at sollicitudin ullamcorper, sed rutrum tincidunt sed. Diam fringilla quam sit pellentesque mattis possimus. Fames mollis dictum ut pellentesque, elit hac massa ante, eget tellus lorem suspendisse mauris, leo arcu wisi, nulla diam. Litora magna purus cursus donec nascetur nec, amet vitae, amet dignissim.</div> <div id="tabCont3">Viverra adipiscing lorem eget in massa ultrices. Ea donec orci voluptate venenatis commodi, iusto nulla duis lobortis qui, iaculis laborum auctor sit sociosqu, eros nullam amet et, vitae vivamus hendrerit nisl elit. Fermentum penatibus eget neque, faucibus commodo vivamus. Accumsan risus ornare nunc semper, sed et interdum augue, erat vel venenatis in. Eget potenti amet non diam vitae, nulla quis pulvinar sodales tempor suscipit a, aliquam aenean nec beatae nullam molestie dolor, praesent ab, nisl pellentesque facilisis urna convallis nec ut. Dignissim suspendisse a, nam molestie pretium quisque fusce ut, turpis sed, ad neque ligula a. Erat pellentesque, dis pede. Neque curae risus sed non vitae. Felis non, dictumst dolor. Iaculis risus sit a, vulputate suspendisse. Sem molestie et dictumst vulputate turpis eget, mauris vestibulum.</div> <div id="tabCont4"></div> <div id="tabCont5"></div> <div id="tabCont6"></div> <div id="tabCont7"></div> <div id="tabCont8"></div> <div id="tabCont9"></div> <!-- Toggle Tab Content End --> </div></div></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/menu/Toggle_Tab_Menus/ttApi.jshttp://javascriptbank.com/javascript/menu/Toggle_Tab_Menus/ttStyle.csshttp://javascriptbank.com/javascript/menu/Toggle_Tab_Menus/ttMenuFrm.html