범용 Infinitus 드롭다운 메뉴 구현 코드

이 글은 주로 보편적인 Infinitus 드롭다운 메뉴의 구현 코드를 소개합니다. 이제 특정 참고 가치가 있습니다. 필요한 친구들이 참조할 수 있습니다.

드롭다운 메뉴는 제 개발에서 자주 접하게 됩니다. 하지만 아무도 없습니다. 모든 프로젝트는 처음부터 작성해야 합니다. 변경하기는 쉽지만 여전히 매우 귀찮습니다. 오늘은 이전 프로젝트 개발에서 메뉴를 정리하는 시간을 갖습니다. 범용 버전이므로 앞으로는 그렇게 번거로울 필요가 없습니다.

Features

오늘 컴파일한 메뉴는 jquery+css로 개발한 것으로 다음과 같은 특징이 있습니다.

1. 강력한 다양성

이전에 사용하던 드롭다운 메뉴에 문제가 있어서 꼭 필요했던 메뉴입니다. 예를 들어, 기본 탐색 메뉴와 하위 메뉴 설정을 분리하려면 두 번째 수준 메뉴는 class="first_menu"이고 세 번째 수준 메뉴는 class="second_menu"... 등입니다. 이러한 작성 방식의 한 가지 문제는 다음과 같습니다. 루프 출력을 수행하는 것은 프로그래머에게 도움이 되지 않으며 이 메뉴에는 CSS 스타일만 도입하면 되고, 다단계 메뉴를 정의할 필요가 없습니다.

2. 드롭다운 지침의 아름다운 자동 호출

과거에는 드롭다운 메뉴에 드롭다운 표시 클래스를 수동으로 추가했지만 이제는 드롭다운 스타일만 정의하면 됩니다. CSS의 다운 효과를 사용하면 코드가 자동으로 드롭다운 메뉴를 찾아 표시 화살표를 추가합니다.

3. 간단한 호출

프로그래머의 출력 목록은 간단하고 많은 판단이 필요하지 않습니다. 메뉴 데이터는 재귀적으로 호출됩니다.

Implementation

1. HTML 코드

먼저 메뉴 목록을 구성하기 위해 ul과 li로 구성된 메뉴 데이터를 페이지에 출력합니다. 구체적인 구조 코드는 다음과 같습니다.

<ul class="Menue">

 <li class="Menue_li"><a href="#">首页</a></li>

 <li class="Menue_li"><a href="#">菜单一</a>

  <ul class="sub_menu">

   <li><a href="#">过山车</a></li>

   <li><a href="#">火山爆发</a></li>

   <li><a href="#">小小鸟</a></li>

  </ul>

 </li>

 <li class="Menue_li"><a href="#">菜单二</a>

  <ul class="sub_menu">

   <li><a href="#">关于我们</a>

    <ul class="sub_menu">

     <li><a href="#">山高地缘</a>

      <ul class="sub_menu">

       <li><a href="#">飞鸽传书</a></li>

       <li><a href="#">生生世世</a></li>

       <li><a href="#">飞黄腾达</a></li>

      </ul>

     </li>

     <li><a href="#">数据库</a>

      <ul class="sub_menu">

       <li><a href="#">数据库表</a></li>

       <li><a href="#">数据加密</a></li>

       <li><a href="#">数据建模</a></li>

      </ul>

     </li>

     <li><a href="#">C摄像头</a></li>

    </ul>

   </li>

   <li><a href="#">测试产品</a></li>

  </ul>

 </li>

</ul>

일부 기본 HTML 코드는 매우 간단합니다. 코드 구조를 강조할 필요는 없습니다. 세 번째 수준 또는 여러 수준 메뉴는 주로 중첩된 ul입니다. 스타일 시트의 이름도 매우 간단합니다. 하위 메뉴는 프로그램 코드의 루프 호출에 매우 도움이 되는 "sub_menu" 스타일입니다.

2. CSS 스타일

Css 스타일 코드도 매우 간단합니다.

a { text-decoration:none; }

ul, li { list-style:none; margin:0; padding:0; }

/*定义菜单*/

.Menue li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }

.Menue li a { color:#fff; font-size:14px; display:block; }

/*下拉菜单样式*/

ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }

.Menue li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }

.Menue li ul.sub_menu li.last { border-bottom:none; } /*js会对最后一个li添加该class，去掉border-bottom效果*/

.Menue li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }

.Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now { background:#f90;color:#fff;}

.Menue li.now,.Menue li.current { background:#f60;color:#fff;}

/*如果有下拉菜单添加的class*/

.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*主导航箭头向下*/

.Menue li a.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;background-position:right -30px;}/*下拉菜单箭头向右*/

.Menue li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;}

.Menue li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#fff;}

여기서 두 가지 점만 강조합니다.

1. 상대 위치

절대: 절대 위치 지정, CSS 작성 방법 "위치: 절대;", 위치 지정은 다음과 같이 두 가지 상황으로 구분됩니다.

A 위쪽, 오른쪽, 아래쪽, 왼쪽이 설정되지 않은 경우 기본값입니다. 부모의 "콘텐츠 영역"을 기준으로 "원점"이 원점입니다.

B. Top, Right, Bottom, Left가 설정된 경우는 다음과 같은 2가지 경우가 있습니다.

　(1) 부모에는 위치 속성이 없고 브라우저의 왼쪽 상단에 있습니다. )는 "원래 좌표"를 클릭하여 위치를 정하며, Top, Right, Bottom, Left 속성에 따라 위치가 결정됩니다.

(2) 부모는 위치 속성을 가지며, 부모의 "좌표의 원점"이 원점입니다.

상대: 상대 위치 지정, CSS 작성 방법 "위치: 상대;", 부모의 "콘텐츠 영역의 원점"을 원점으로 참조하고, 부모가 없는 경우 "콘텐츠 영역의 원점"을 사용합니다. Body의 원점을 기준으로 Top, Right, Bottom, Left 속성에 따라 위치가 결정되며 "높이 확장 또는 점유" 기능을 가지고 있습니다.

위의 두 가지 차이점은 매우 중요하며 매우 일반적인 기술이므로 구별해야 합니다. 이 두 가지 속성 때문에 개발 중에 문제를 찾는 데 많은 시간을 낭비했습니다.

2. 배경 위치 사용

때때로 웹 사이트 속도를 향상하고 웹 사이트 관리를 용이하게 하기 위해 일반적으로 사용되는 작은 그림을 큰 그림에 배치하는 경우가 많습니다. 이 방법은 CSS에 해당하는 작은 그림이 필요할 때 사용할 수 있습니다. 구현은 의미를 이해하는 한 매우 편리합니다. 이 방법의 명확한 점은 이미지 차단 기능입니다.

구문:

배경 위치: 길이 || 길이

배경 위치: 위치

값:

길이 : 백분율 | 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다.

위치 :위 | 가운데 | 아래 | 왼쪽 | 오른쪽

설명:
객체의 배경 이미지 위치를 설정하거나 검색합니다. background-image 속성을 먼저 지정해야 합니다. 이 속성 위치 지정은 개체의 패딩 설정에 영향을 받지 않습니다. 기본값은 0% 0%입니다. 이때, 배경 이미지는 패딩을 제외한 객체의 콘텐츠 영역 중 좌측 상단에 위치하게 됩니다. 하나의 값만 지정하면 해당 값이 가로좌표에 사용됩니다. 세로좌표는 기본적으로 50%로 설정됩니다. 두 개의 값을 지정하면 두 번째 값이 세로좌표로 사용됩니다. 설정값이 오른쪽 중앙이면 오른쪽 가로좌표 값이 중앙값보다 우선하므로 배경 이미지가 오른쪽에 위치하게 됩니다. 다음은 몇 가지 방정식입니다.

왼쪽 상단, 왼쪽 상단은 0% 0%에 해당합니다.

상단, 상단 중앙, 중앙 상단은 50% 0%에 해당합니다.

오른쪽 상단, 오른쪽 상단은 100% 0%에 해당합니다. .

왼쪽, 왼쪽 중앙, 중앙 왼쪽은 0% 50%에 해당합니다.

중앙, 중앙 중앙은 50% 50%에 해당합니다.

오른쪽, 오른쪽 중앙, 중앙 오른쪽은 100% 50%에 해당합니다.

왼쪽하단, 왼쪽하단은 0% 100%에 해당합니다.

하단, 하단 중앙, 중앙하단은 50% 100%에 해당합니다.

bottom right, right bottom 等价于 100% 100%

三、JS代码

本菜单是以jquery为基础的所以首先必须引入jquery代码库，然后编写如下JS代码实现下拉菜单。

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

 //为导航设置默认高亮 与本菜单无关

 $("ul.Menue li.Menue_li:eq(0)").addClass("current")

 /*jquery menu 开始*/

 //为子菜单的最后一个li添加样式，适合为li添加下划线时去除最后一个的下划线

 $(".sub_menu").find("li:last-child").addClass("last")

 //遍历全部li，判断是否包含子菜单，如果包含则为其添加箭头指示状态

 $(".Menue li").each(function(){

 if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}

 })

 

 //

 $(".Menue li").hover(function(){

 $(this).addClass("now");

 var menu = $(this);

  menu.find("ul.sub_menu:first").show();

 },function(){

 $(this).removeClass("now");

 $(this).find("ul.sub_menu:first").hide();

 });

 

 var submenu = $(".sub_menu").find(".sub_menu")

 submenu.css({left:"100px",top:"0px"})

 $(".sub_menu li").hover(function(){

 $(this).find("a:first").addClass("now")

 $(this).find("ul:first").show();

 },function(){

 $(this).find("a:first").removeClass("now")

 $(this).find("ul:first").hide()

 });

/*jquery menu 结束*/

})

</script>

通过以上步骤就实现了一个通用的多级菜单，上面代码是本人日常开发中的积累，由于本人水平有限可能存在着许多错误希望同僚们批评指正或提出更优化的代码供本人参考，谢谢。

위 내용은 범용 Infinitus 드롭다운 메뉴 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!