jQuery怎么实现竖向二级导航菜单

jQuery如何实现竖向二级导航菜单

jQuery如何实现竖向二级导航菜单:
二级导航菜单在网页设计中数不胜数，有横向导航菜单，也有竖向导航菜单。在个人的印象中，好像介绍实现横向导航的教程比较多，所以在这里咱们就单独介绍一下如何使用jQuery实现竖向导航菜单，这里只介绍如何实现此种功能，对于效果的美观度，可以自行修改设计。下面简单介绍一下如何实现此效果:
静态代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
 body 
 {
   font-size:12px;
   padding:0px;
   margin:0px;
 }
 #menu,#menu ul
 {
   list-style-type:none;
   margin: 0;
   padding: 0;
   width:160px;
 }
 #menu a
 {
   display:block;
   text-decoration: none;        
 }
 #menu li
 {
   margin-top: 1px;
 }
 #menu li ul
 {
   display:none;
 }
 #menu li a 
 {
   background:#ccc;
   color: #fff;        
   padding:5px;
 }
 #menu li ul li a 
 {
   background-color:green;
   color:#000;
   padding-left:20px;
 }
</style>
</head>
<body>
<ul id="menu">
  <li> <a href="#">div+css专区</a>
    <ul>
      <li><a href="#">CSS学习</a></li>
      <li><a href="#">div+css教程</a></li>
    </ul>
  </li>
  <li> <a href="#">jQuery专区</a>
    <ul>
      <li><a href="#">实例教程</a></li>
      <li><a href="#">jQuery教程</a></li>
      <li><a href="#">jQuery特效</a></li>
    </ul>
  </li>
  <li> <a href="#">交流专区</a>
    <ul>
      <li><a href="#">搜索优化</a></li>
      <li><a href="#">运营交流</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

以上代码是代码的代码，这个时候二级菜单式是隐藏的。需要特别注意的是，二级菜单的ul是嵌套在li元素中，之所以这样，是为了便于jQuery代码的处理，比如当鼠标指针离开附近li的时候，二级菜单就可以隐藏，否则不容易当鼠标指针一旦一级菜单的li，二级菜单就会隐藏，无法选中二级菜单。为静态代码添加jQuery代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
 body 
 {
   font-size:12px;
   padding:0px;
   margin:0px;
 }
 #menu,#menu ul
 {
   list-style-type:none;
   margin: 0;
   padding: 0;
   width:160px;
 }
 #menu a
 {
   display:block;
   text-decoration: none;        
 }
 #menu li
 {
   margin-top: 1px;
 }
 #menu li ul
 {
   display:none;
 }
 #menu li a 
 {
   background:#ccc;
   color: #fff;        
   padding:5px;
 }
 #menu li ul li a 
 {
   background-color:green;
   color:#000;
   padding-left:20px;
 }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  jQuery.mymenu=function(selector){
    $(selector).click(function(){
      $(this).find("ul").css("display","block");
    });
    $(selector).mouseleave(function(){
      $(this).find("ul").css("display","none");
    }) 
  }
  $.mymenu("#menu li");   
})
</script>
</head>
<body>
<ul id="menu">
  <li> <a href="#">div+css专区</a>
    <ul>
      <li><a href="#">CSS学习</a></li>
      <li><a href="#">div+css教程</a></li>
    </ul>
  </li>
  <li> <a href="#">jQuery专区</a>
    <ul>
      <li><a href="#">实例教程</a></li>
      <li><a href="#">jQuery教程</a></li>
      <li><a href="#">jQuery特效</a></li>
    </ul>
  </li>
  <li> <a href="#">交流专区</a>
    <ul>
      <li><a href="#">搜索优化</a></li>
      <li><a href="#">运营交流</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

以上代码实现了我们想要的效果，不是太美观，不过框架和方法已经有了，可以根据需要自行修饰。

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0427/242.html

jQuery怎么实现竖向二级导航菜单

相关推荐