»
Tiếng AnhTiếng PhápTiếng Việt

In - Menu nhiều cấp - JavaScriptBank.com

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

Menu nhiều cấp © JavaScriptBank.comHiệ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



CSS
<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-->


JavaScript
<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-->


HTML
<TABLE cellSpacing=0 cellPadding=0 width=780 border=0>  <TBODY>  <TR>    <TD width=180     background="nav_back.gif"     height=36>&nbsp;</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-->


Files
http://javascriptbank.com/javascript/menu/Multilevel_menu/Multilevel_menu_images.ziphttp://javascriptbank.com/javascript/menu/Multilevel_menu/ypSlideOutMenusC.js