jquery+CSS网站导航菜单新手练手

 刚进公司不久,新人的任务也不是很多.今天用空闲的时间写了两个不同样式的导航菜单,一个竖的,一个横的,话不多说直接给出代码,如果css或jquery有用的不到位之处,请看贴的园友们指出,共同进步.

竖向导航菜单:

    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
print?
01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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
print?
01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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>

 

这里有个问题,关于导航菜单子菜单的展开和收缩,鼠标移到顶级菜单,展开其子菜单,如果鼠标再进入子菜单然后离开的话,子菜单能正常的收缩.但是如果只是划过顶级菜单,其子菜单展开后就不缩回了,我想了半天,没想出个好点的解决方案,所以如果有朋友知道怎么做,不妨回复教我一下,也让大家学习学习.