집 >웹 프론트엔드 >JS 튜토리얼 >Jquery는 수직 및 수평 menu_jquery를 구현합니다.

Jquery는 수직 및 수평 menu_jquery를 구현합니다.

WBOY원래의: 2016-05-16 15:18:291206검색

첫 번째 메뉴는 메뉴 항목을 클릭하면 해당 하위 메뉴 항목이 표시되는 방식으로 구현되며 삼각형이 아래쪽 삼각형으로 변경됩니다. 다음 메뉴는 해당 메뉴 항목으로 마우스를 이동시키면 해당 하위 메뉴 항목이 표시되며, 마우스가 멀어지면 해당 하위 메뉴가 사라집니다.

코드 부분은 아래와 같습니다.

html 코드:

헤드 코드 섹션에 제목 및 참조 추가:

<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>

메뉴 항목의 내용은 ul과 li가 중첩된 본문 부분에서 편집됩니다. 메뉴의 가장 바깥쪽 레이어는 ul이고, 한 레이어의 각 메인 메뉴는 li에 배치됩니다. 하위 메뉴가 있는 경우에는 메인 메뉴의 li에 새로운 ul을 생성한 후 중첩시켜서 다층 메뉴를 구성할 수 있습니다.

<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>

CSS 코드 부분
1. 기본적으로 브라우저의 ul 및 li 요소에는 텍스트 앞에 점 식별자가 있으며 li 요소는 들여쓰기됩니다.
2. 목록 스타일 속성 값은 없음이며, 이는 ul 및 li 앞의 작은 점을 지울 수 있습니다.
3. 들여쓰기 값을 지우고 패딩과 여백은 모두 0입니다. IE6과 IE7은 들여쓰기 값을 지우기 전에 여백을 0으로 설정해야 합니다.

<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>

menu.js 코드:
1.main a는 .main
클래스를 사용하여 요소 내부의 모든 노드를 선택합니다. 2.main>a는 .main 하위 노드
에서 a 노드를 선택합니다.

<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>

위 내용은 이 글의 전체 내용이며, 메뉴 제작 효과를 더 잘 발휘하는 데 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery Form 제출 플러그인_jquery의 formSerialize, fieldSerialize, fieldValue, ResetForm,clearForm,clearFields 적용다음 기사：jQuery Form 제출 플러그인_jquery의 formSerialize, fieldSerialize, fieldValue, ResetForm,clearForm,clearFields 적용

Jquery는 수직 및 수평 menu_jquery를 구현합니다.

관련 기사