Jquery implements vertical and horizontal menu

Jquery implements vertical and horizontal menu_jquery

WBOY

Release： 2016-05-16 15:18:29

Original

1149 people have browsed it

The first menu is implemented by clicking on a menu item to display the corresponding submenu item, and the triangle changes to a downward triangle. The following menu moves the mouse to the menu item to display the corresponding submenu item, and the submenu disappears when the mouse moves away.

The code part is introduced below:

html code:

Add title and reference to the head code section:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> 
  <title>JQuery实战-菜单效果</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <link type="text/css" rel="stylesheet" href="css/menu.css" /> 
  <script type="text/javascript" src="js/jquery.js"></script> 
  <script type="text/javascript" src="js/menu.js"></script> 
</head></span>

Copy after login

The content of the menu item is edited in the body part, which is represented by nested ul and li. The outermost layer of the menu is ul, and each main menu of one layer is placed in a li. If there is a submenu, create a new ul in the li of the main menu, and then nest it in order to build a multi-layered menu.

<span style="font-family:KaiTi_GB2312;font-size:18px;"><body> 
    <ul> 
      <li class="main"> 
          <a href="#">菜单项1</a> 
        <ul style="display:none;"> 
          <li> 
            <a href="#">子菜单项11</a> 
          </li> 
          <li> 
            <a href="#">子菜单项12</a> 
          </li> 
        </ul> 
      </li> 
      <li class="main"> 
        <a href="#">菜单项2</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项21</a> 
          </li> 
          <li> 
            <a href="#">子菜单项22</a> 
          </li> 
        </ul> 
      </li> 
      <li class="main"> 
        <a href="#">菜单项3</a> 
        <ul> 
          <li> 
          <a href="#">子菜单项31</a> 
          </li> 
          <li> 
            <a href="#">子菜单项32</a> 
          </li> 
        </ul> 
      </li> 
    </ul> 
     
    <br/> 
    <ul> 
      <li class="hmain"> 
        <a href="#">菜单项1</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项11</a> 
          </li> 
          <li> 
            <a href="#">子菜单项12</a> 
          </li> 
        </ul> 
      </li> 
      <li class="hmain"> 
        <a href="#">菜单项2</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项21</a> 
          </li> 
          <li> 
            <a href="#">子菜单项22</a> 
          </li> 
        </ul> 
      </li> 
      <li class="hmain"> 
        <a href="#">菜单项3</a> 
        <ul> 
          <li> 
          <a href="#">子菜单项31</a> 
          </li> 
          <li> 
            <a href="#">子菜单项32</a> 
          </li> 
        </ul> 
      </li> 
    </ul> 
     
  </body></span>

Copy after login

css code part
1. By default, the ul and li elements in the browser have dot identifiers before the text, and the li element will be indented
2. The list-style attribute value is none, which can clear the small dots in front of ul and li.
3. Clear the indent value, padding and margin are both 0. IE6 and IE7 need to set the margin to 0 before clearing the indent value.

<span style="font-family:KaiTi_GB2312;font-size:18px;">ul,li{ 
  list-style:none;/* //清除ul和li上默认的小圆点 */ 
 
} 
ul{ 
  /* 清除子菜单的缩进值 */ 
  padding:0; 
  margin:0; 
} 
.main,.hmain{ 
  background-image:url(../images/title.gif);/*指定背景图*/ 
  background-repeat:repeat-x; 
  width:120px; 
} 
li{ 
  background-color:#EEEEEE; 
} 
a { 
  /*取消所有的下划线*/ 
  text-decoration:none; 
  padding-left:20px;  
   display:block; 
  display:inline-block;/* 解决ie6不兼容的问题 */  
  width:100px; 
  padding-top:3px; 
  padding-bottom:3px; 
} 
.main a,.hmain a { 
  color:white;/*主菜单标签颜色为白色*/ 
  background-image:url(../images/collapsed.gif); 
  background-repeat:no-repeat; 
  background-position:3px center; /* 图片位置在中间 */ 
} 
.main li a ,.hmain li a{ 
  /* 子菜单项 */ 
  color:black; 
  background-image:none;/* 不使用图片 */ 
  padding-left:18px;  
   
} 
.main ul,.hmain ul{ 
  /* 子菜单隐藏 */ 
   display:none;  
} 
.hmain{ 
  float:left;/*浮动显示*/ 
  margin:1px; 
}</span>

Copy after login

menu.js code:
1.main a selects all a nodes inside the element using the class .main
2.main>a selects the a node in the .main child node

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(document).ready(function(){ 
  //页面的Dom已经装载完成时，执行的代码 
   $(".main > a,.hmain a").click(function(){ 
     //找到主菜单项对应的子菜单项 
    var ulNode = $(this).next("ul"); 
    // //根据情况收缩菜单 
    // if(ulNode=$.css("display") == "none"){ 
      // ulNode.css("display","block"); 
    // }else{ 
      // ulNode.css("display","none"); 
    // } 
     
    // ulNode.show("normal");//设置展开的速度，可以是nomal,slow,fast 
    // ulNode.hide(); 
     // ulNode.toggle();//toggle设置展开或者收缩 
    //卷帘效果，向上或者向下 
    // ulNode.slideDown(); 
    // ulNode.slideUp; 
    ulNode.slideToggle(); 
  }); 
  //麻烦的方法 
  // $(".hmain > a").hover(function(){ 
    // $(this).next("ul").slideDown(); 
  // }.Function(){ 
    // var ulNode=$(this).next("ul"); 
    // var timeoutId =setTimeout(function(){ 
     
// })     
      // ulNode.slideUp(); 
  // },300); 
  // ulNode.hover(function(){ 
    // clearTimeout(timeoutId); 
  // }.function(){ 
    // $(this).slideUp(); 
  // }); 
 
  /********实现鼠标移动到指定主菜单后子菜单自动显示*****/ 
   
  $(".hmain").hover(function(){ 
    $(this).children("ul").slideDown(); 
  },function(){ 
    $(this).children("ul").slideUp(); 
  }); 
   
}); 
  /* 
  *修改主菜单的指示图标随着子菜单的变化而变化 
  * 
  */ 
function changeIcon(mainNode) { 
  if (mainNode) { 
    if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { 
      mainNode.css("background-image","url('images/expanded.gif')"); 
    } else { 
      mainNode.css("background-image","url('images/collapsed.gif')"); 
    } 
  } 
} 
</span>

Copy after login

The above is the entire content of this article, I hope it can help you better achieve the effect of making menus.