非常不错的菜单导航效果，摘自Crazy Web。学习学习：） 

大小: 9 K尺寸: 459 x 229浏览: 17 次点击打开新窗口浏览全图

JS代码：

JavaScript代码
  1. <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>  
  2. <script type="text/javascript">  
  3.   
  4. $(document).ready(function()  
  5. {  
  6.   
  7. $('#menuBar li').click(function()  
  8. {  
  9.   var url = $(this).find('a').attr('href');  
  10.   document.location.href = url;  
  11.   
  12. });  
  13.   
  14. $('#menuBar li').hover(function()  
  15. {  
  16.      
  17.    $(this).find('.menuInfo').slideDown();  
  18. },  
  19. function()  
  20. {  
  21.     
  22.   $(this).find('.menuInfo').slideUp();  
  23.   
  24. });  
  25.   
  26. });  
  27.   
  28.   
  29. </script>  

(X)HTML代码：

XML/HTML代码
  1. <div id="menuBarHolder">  
  2.    
  3. <ul id="menuBar">  
  4.    
  5. <li class="firstchild"><a href="javascript:#">Home</a>  
  6.    
  7. <div class="menuInfo">I am some text about the home section</div></li>  
  8. <li><a href="javascript:#">Services</a>  
  9.    
  10. <div class="menuInfo">I am some text about the services section</div></li>  
  11. <li><a href="javascript:#">Clients</a>  
  12.    
  13. <div class="menuInfo">I am some text about the clients section</div></li>  
  14. <li><a href="javascript:#">Portfolio</a>  
  15.    
  16. <div class="menuInfo">I am some text about the portfolio section</div></li>  
  17. <li><a href="javascript:#">About</a>  
  18.    
  19. <div class="menuInfo">I am some text about the about section</div></li>  
  20. <li><a href="javascript:#">Blog</a>  
  21.    
  22. <div class="menuInfo">I am some text about the blog section</div></li>  
  23. <li><a href="javascript:#">Follow</a>  
  24.    
  25. <div class="menuInfo">I am some text about the follow section</div></li>  
  26. <li><a href="javascript:#">Contact</a>  
  27.    
  28. <div class="menuInfo">I am some text about the contact section</div></li>  
  29.    
  30. </ul>  
  31.    
  32. </div>  
  33. </div>  

 CSS代码

CSS代码
  1. #menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}  
  2. #menuBarHolder ul{ list-style-type:none; display:block;}  
  3. #container { margin-top:100px;}  
  4. #menuBar li{  float:left;  padding:15px; height:16px; width:50px; border-right:1px solid #ccc; }  
  5. #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}  
  6. .menuHover { background-color:#999;}  
  7. .firstchild { border-left:1px solid #ccc;}  
  8. .menuInfo { cursor:hand; background-color:#000; color:#fff;  
  9. width:74px; font-size:11px;height:100px; padding:3px; display:none;  
  10. position:absolute; margin-left:-15px; margin-top:-15px;  
  11. -moz-border-radius-bottomright: 5px;  
  12. -moz-border-radius-bottomleft: 5px;  
  13. -webkit-border-bottom-left-radius: 5px;  
  14. -webkit-border-bottom-rightright-radius: 5px;  
  15. -khtml-border-radius-bottomright: 5px;  
  16. -khtml-border-radius-bottomleft: 5px;  
  17.  border-radius-bottomright: 5px;  
  18. border-radius-bottomleft: 5px;  
  19. }  

 

Demo 

Download

 

 

 

Share