Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp
URL: https://www.javascriptbank.com/multilevel-menu-index.html
Hiệu ứng tạo một trình đơn nhiều cấp trông rất sinh động.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp
URL: https://www.javascriptbank.com/multilevel-menu-index.html
<STYLE>@import url( /_common/demo.css );#menubar A {BORDER-RIGHT: #f9f1c8 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #f9f1c8 1px solid; PADDING-LEFT: 5px; BORDER-LEFT: #f9f1c8 1px solid; COLOR: #006699; BORDER-BOTTOM: #f9f1c8 1px solid; LETTER-SPACING: 1px; TEXT-DECORATION: none}#menubar A.active {BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ccc599; BORDER-TOP-COLOR: #ffffff; TEXT-DECORATION: none; BORDER-RIGHT-COLOR: #ccc599}.menu A:visited {BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ccc599; BORDER-TOP-COLOR: #ffffff; TEXT-DECORATION: none; BORDER-RIGHT-COLOR: #ccc599}.menu A {PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; WIDTH: 175px; COLOR: #446ab2; PADDING-TOP: 2px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none}.menu A:hover {COLOR: #36558d; BACKGROUND-COLOR: #a9c0ec; TEXT-DECORATION: none}</STYLE><!-- 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><!--function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></SCRIPT><SCRIPT language=javascript src="ypSlideOutMenusC.js"></SCRIPT><SCRIPT language=javascript>new ypSlideOutMenu("menu1", "down", 190, 98, 200, 100)new ypSlideOutMenu("menu2", "down", 267, 98, 200, 200)new ypSlideOutMenu("menu3", "down", 341, 98, 200, 200)new ypSlideOutMenu("menu4", "down", 397, 98, 200, 200)new ypSlideOutMenu("menu5", "down", 468, 98, 200, 200) ypSlideOutMenu.writeCSS();</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE cellSpacing=0 cellPadding=0 width=780 border=0> <TBODY> <TR> <TD width=180 background="nav_back.gif" height=36> </TD> <TD width=600 background="nav_back.gif" height=36><A onmouseover="ypSlideOutMenu.showMenu('menu1');MM_swapImage('Image111','','menu_solutions.gif',1); " onmouseout="ypSlideOutMenu.hideMenu('menu1'); MM_swapImgRestore() ;" href="solutions.php"><IMG id=Image111 height=36 src="menu_solutions.gif" width=77 border=0 name=Image111></A><A onmouseover=" ypSlideOutMenu.showMenu('menu2');MM_swapImage('Image101','','menu_services1.gif',1)" onmouseout="ypSlideOutMenu.hideMenu('menu2'); MM_swapImgRestore() ;" href="services.php"><IMG id=Image101 height=36 src="menu_services1.gif" width=74 border=0 name=Image101></A><A onmouseover=" ypSlideOutMenu.showMenu('menu3');MM_swapImage('Image121','','menu_about1.gif',1)" onmouseout="ypSlideOutMenu.hideMenu('menu3');MM_swapImgRestore() ;" href="about.php" ;><IMG id=Image121 height=36 src="menu_about1.gif" width=56 border=0 name=Image121></A><A onmouseover=" ypSlideOutMenu.showMenu('menu4');MM_swapImage('Image131','','menu_support1.gif',1)" onmouseout="ypSlideOutMenu.hideMenu('menu4'); MM_swapImgRestore() ;" href="support"><IMG id=Image131 height=36 src="menu_support1.gif" width=71 border=0 name=Image131></A><A onmouseover="ypSlideOutMenu.showMenu('menu5');MM_swapImage('Image141','','menu_contact1.gif',1); " onmouseout="ypSlideOutMenu.hideMenu('menu5'); MM_swapImgRestore() ;" href="contact.php"><IMG id=Image141 height=36 src="menu_contact1.gif" width=71 border=0 name=Image141></A></TD></TR></TBODY></TABLE><DIV id=menu1Container><DIV class=menu id=menu1Content><DIV class=options><TABLE cellSpacing=1 cellPadding=0 width=175 bgColor=#446ab2 border=0> <TBODY> <TR> <TD bgColor=#cdddfa><FONT face="Arial, Helvetica, sans-serif" size=2><IMG height=4 src="menu_blue.gif" width=175></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="12all">1-2-All Broadcast E-mail</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="kb">KnowledgeBuilder</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="supporttrio">SupportTrio</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="visualedit">visualEdit</A></FONT></TD></TR></TBODY></TABLE></DIV></DIV></DIV><DIV id=menu2Container><DIV class=menu id=menu2Content><DIV class=options><TABLE cellSpacing=1 cellPadding=0 width=175 bgColor=#446ab2 border=0> <TBODY> <TR> <TD bgColor=#cdddfa><FONT face="Arial, Helvetica, sans-serif" size=2><IMG height=4 src="menu_blue.gif" width=175></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Custom Development</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Design Services</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Consulting</A></FONT></TD></TR></TBODY></TABLE></DIV></DIV></DIV><DIV id=menu3Container><DIV class=menu id=menu3Content><DIV class=options><TABLE cellSpacing=1 cellPadding=0 width=175 bgColor=#446ab2 border=0> <TBODY> <TR> <TD bgColor=#cdddfa><FONT face="Arial, Helvetica, sans-serif" size=2><IMG height=4 src="menu_blue.gif" width=175></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">The Difference</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Our Guarantee</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><A href=""><FONT face="Arial, Helvetica, sans-serif" size=2>Case Studies</FONT></A></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Clients</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Background</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Team</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Newsletter</A></FONT></TD></TR></TBODY></TABLE></DIV></DIV></DIV><DIV id=menu4Container><DIV class=menu id=menu4Content><DIV class=options><TABLE cellSpacing=1 cellPadding=0 width=175 bgColor=#446ab2 border=0> <TBODY> <TR> <TD bgColor=#cdddfa><FONT face="Arial, Helvetica, sans-serif" size=2><IMG height=4 src="menu_blue.gif" width=175></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Product Manuals</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="support">KnowledgeBase</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Online Forums</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Support Center</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><A href=""><FONT face="Arial, Helvetica, sans-serif" size=2>Affiliate Program</FONT></A></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="reseller">Reseller Program</A></FONT></TD></TR></TBODY></TABLE></DIV></DIV></DIV><DIV id=menu5Container><DIV class=menu id=menu5Content><DIV class=options><TABLE cellSpacing=1 cellPadding=0 width=175 bgColor=#446ab2 border=0> <TBODY> <TR> <TD bgColor=#cdddfa><FONT face="Arial, Helvetica, sans-serif" size=2><IMG height=4 src="menu_blue.gif" width=175></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Sales</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Support</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Location</A></FONT></TD></TR> <TR> <TD bgColor=#cdddfa height=20><FONT face="Arial, Helvetica, sans-serif" size=2><A href="">Employment</A></FONT></TD></TR></TBODY></TABLE><!-- 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/Multilevel_menu/Multilevel_menu_images.ziphttp://javascriptbank.com/javascript/menu/Multilevel_menu/ypSlideOutMenusC.js