竖向导航菜单: CSS如下navigation.css 01 #navigation { 02 width:200px; 03 } 04 #navigation ul { 05 list-style:none; 06 margin:0; 07 padding:0; 08 } 09 #navigation li { 10 border-bottom:1px solid #ed9f9f; 11 } 12 #navigation li a:link, #navigation li a:visited { 13 font-size:90%; 14 display:block; 15 padding:0.4em 0 0.4em 0.5em; 16 border-left:12px solid #711515; 17 border-right:1px solid #711515; 18 background-color:#b51032; 19 color:#ffffff; 20 text-decoration:none; 21 } 22 23 #navigation li a:hover { 24 background-color:#711515; 25 color:#ffffff; 26 } 27 #navigation ul ul { 28 margin-left:12px; 29 } 30 #navigation ul ul li { 31 border-bottom:1px solid #711515; 32 margin:0; 33 } 34 #navigation ul ul a:link, #navigation ul ul a:visited { 35 background-color:#ed9f9f; 36 color:#711515; 37 } 38 #navigation ul ul a:hover { 39 background-color:#711515; 40 color:#fff; 41 } HTML如下: view source 02 <html> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 05 <title>Untitled Document</title> 06 <link rel="stylesheet" type="text/css" href="css/navigation.css" /> 07 <script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script> 08 <script type="text/javascript"> 09 $(function() { 10 var $submenus = $('.submenu'); 11 $submenus.hide(); 12 $submenus.prev().click(function() { 13 $submenus.slideUp('fast'); 14 $mymenu = $(this).next(); 15 if($mymenu.is(':hidden')) { 16 $mymenu.slideDown('fast'); 17 } else { 18 $mymenu.slideUp('fast'); 19 } 20 }); 21 }); 22 </script> 23 </head> 24 <body> 25 <div id="navigation"> 26 <ul> 27 <li><a href="#">Recipes</a> 28 <ul class="submenu"> 29 <li><a href="#">Starters</a></li> 30 <li><a href="#">Main Courses</a></li> 31 <li><a href="#">Desserts</a></li> 32 </ul> 33 </li> 34 <li><a href="#">Contact Us</a> 35 <ul class="submenu"> 36 <li><a href="#">Andrew</a></li> 37 <li><a href="#">Bruce</a></li> 38 <li><a href="#">Simpzon</a></li> 39 </ul> 40 </li> 41 <li><a href="#">Articles</a></li> 42 <li><a href="#">Buy Online</a></li> 43 </ul> 44 </div> 45 </body> 46 </html> 效果还算可以,这个例子的样式来自sitepoint,css精粹(第三版)中的一个例子,我再此基础上加了些jquery用于子菜单的下拉收起效果 //------------------------------------------------------------------- 横向导航菜单 CSS如下horizontalNav.css view source print? 01 body { 02 padding:1em; 03 font-family:"Times New Roman", Times, serif; 04 } 05 #navigation { 06 font-size:90%; 07 } 08 #navigation ul { 09 list-style:none; 10 margin:0; 11 padding:0; 12 padding-top:1em; 13 } 14 #navigation li { 15 float:left; 16 } 17 #navigation .submenu { 18 border-top:1px solid #ffffff; 19 padding-top:0; 20 } 21 #navigation .submenu li { 22 float:none; 23 border-bottom:1px solid #fff; 24 border-right:0px; 25 } 26 #navigation a { 27 display:block; 28 padding:0.4em 1em 0.4em 1em; 29 font-weight:bold; 30 text-decoration:none; 31 color:#ffffff; 32 width:7em; 33 border-right:2px solid #dafce0; 34 } 35 #navigation .submenu a { 36 border-left:10px solid #d3de4e;; 37 width:6em; 38 } 39 40 #navigation a:link, #navigation a:visited { 41 background-color:#388d29;; 42 } 43 44 #navigation a:hover { 45 color:#388d29; 46 background-color:#c0e296; 47 text-decoration:underline; 48 } HTML如下: view source 02 <html> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 05 <title>Untitled Document</title> 06 <link rel="stylesheet" type="text/css" href="css/horizontalNav.css" /> 07 <script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script> 08 <script type="text/javascript"> 09 $(function() { 10 $('.submenu').hide(); 11 $('.submenu').prev().mouseenter(function() { 12 var $submenu = $(this).next(); 13 $submenu.slideDown('normal').mouseleave(function(){ 14 $(this).slideUp('normal'); 15 }); 16 }); 17 }); 18 </script> 19 </head> 20 <body> 21 <div id="navigation"> 22 <ul> 23 <li><a href="#">Recipes</a> 24 <ul class='submenu'> 25 <li><a href="#">China Style</a></li> 26 <li><a href="#">US Style</a></li> 27 <li><a href="#">Japan Style</a></li> 28 </ul> 29 </li> 30 <li><a href="#">Contact</a></li> 31 <li><a href="#">Articles</a></li> 32 <li><a href="#">Buy Online</a> 33 <ul class='submenu'> 34 <li><a href="#">Amazon</a></li> 35 <li><a href="#">SitePoint</a></li> 36 <li><a href="#">Apress</a></li> 37 <li><a href="#">O'relly</a></li> 38 </ul> 39 </li> 40 </ul> 41 </div> 42 </body> 43 </html>
|