드롭 다운 메뉴는 종종 내 개발에서 발생하지만 프로젝트를 다시 작성할 필요는 없습니다. 그것을 수정하는 것은 간단하지만 매우 번거 롭지 만 여전히 비교적 게으르다. 오늘 저는 이전 프로젝트 개발에서 메뉴를 구성하고 일반 버전을 작성할 시간이 있습니다. 앞으로는 그렇게 번거 롭을 필요가 없습니다.
특징
오늘 컴파일 된 메뉴는 다음 특성을 가진 jQuery+CSS에 의해 개발되었습니다.
1. 강한 다목적 성
이전에 사용한 드롭 다운 메뉴에는 문제가 있었으며 메인 탐색 및 하위 메뉴를 별도로 설정해야합니다. 예를 들어, 두 번째 레벨 메뉴는 class = "First_Menu"이며, 세 번째 레벨 메뉴는 class = "second_menu"등입니다. 이 작문 방법에는 문제가 있습니다. 즉, 루프 출력을 수행하는 프로그래머에게는 도움이되지 않습니다. 이 메뉴는 다단계 메뉴를 정의 할 필요없이 CSS 스타일 만 소개하면됩니다.
2. 아름다운 자동 통화 풀다운 지침
과거에는 드롭 다운 메뉴에 드롭 다운 클래스를 수동으로 추가합니다. 이제 CSS의 드롭 다운 효과 스타일 만 정의하면 코드가 드롭 다운 메뉴를 자동으로 찾고 표시기 화살표를 추가합니다.
3. 간단한 전화
프로그래머 출력 목록은 간단하며 많은 판단이 필요하지 않습니다. 메뉴 데이터를 재귀 적으로 호출하십시오.
성취하다
1. HTML 코드
먼저 UL과 Li로 구성된 페이지의 메뉴 데이터를 출력하여 메뉴 목록을 작성합니다. 특정 구조 코드는 다음과 같습니다.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> 메뉴 One </a> <ul> <li> <a href = "#"> Rock Coaster </a> <li> <a href = "#"> Volcanic eRuption </a> <li> <a href = "#"#"#"#"#"#"#" bird </a> </li> </li> </li> <li> <a href = "#"> 메뉴 2 </a> <ul> <li> <a href = "#"> 우리에 대해 </a> <ul> <li> <a href = "#"> 지리적 지리 </a> <ul> <li> <a href = "#"> PIG "> PIGEON </a>"> href = "#"> Birth and Eternal </a> </a> </li> <li> <a href = "#"> href = "#"> 성공 </a> </li> </li> </li> <li> <a href = "#"> database </a> <ul> <li> <a href = "#"</li> href = "#"> 데이터 암호화 </a> </li> <li> <a href = "#"> 데이터 모델링 </a> </li> </li> </li> </li> <li> <a href = "#"> c camera </a> </li> </ul>
일부 기본 HTML 코드는 간단하며 코드의 의미를 설명 할 필요가 없습니다. 그들은 코드 구조를 강조합니다. 두 번째 레벨, 3 단계 또는 여러 수준의 메뉴가 주로 중첩되어 있는지; 스타일 시트 이름은 또한 매우 단일이며 하위 메뉴는 "sub_menu"스타일로 프로그램 코드 루프 호출에 매우 도움이됩니다.
2. CSS 스타일
CSS 스타일 코드도 매우 간단합니다. 특정 코드는 다음과 같습니다.
A {텍스트 결정 : 없음; } ul, Li {List 스타일 : 없음; 여백 : 0; 패딩 : 0; }/*정의 메뉴*/. menue li {배경 :#111; 색상 : #fff; 높이 : 30px; 라인 높이 : 30px; 위치 : 상대; 플로트 : 왼쪽; 마진 오른쪽 : 5px; 너비 : 100px; 텍스트 정렬 : 센터; Font-Family : Arial, Helvetica, Sans-Serif; } .menue li a {색상 : #fff; 글꼴 크기 : 14px; 디스플레이 : 블록; }/* 드롭 다운 메뉴 스타일*/ul.sub_menu {위치 : 절대; 너비 : 100px; 디스플레이 : 없음; Z- 인덱스 : 999; } .menue li ul.sub_menu li {배경 : 없음; 색상 :#555; 글꼴 크기 : 12px; 국경-바닥 : 1px #333 고체; 위치 : 상대; 너비 : 100px; 높이 : 30px; . } /*js는이 클래스를 마지막 Li에 추가하고 국경-바닥 효과를 제거합니다* /. menue li ul.sub_menu li a {배경 :#222; 색상 :#888; 디스플레이 : 블록; 높이 : 30px; . 배경 : URL (Arrow.png) 오른쪽 반복 없음; 패딩-오른쪽 : 15px;}/*메인 탐색 화살표는 아래로 아래에 있습니다*/. menue li A.Hasmenu {배경 : url (arrow.png) 오른쪽이 없습니다. 패딩-오른쪽 : 15px; 배경 위치 : 오른쪽 -30px;}/*드롭 다운 메뉴 화살표는 오른쪽*/. menue li ul.sub_menu li a.hasmenu {배경 :#222 url (arrow.png) no-Repeat 오른쪽 위; No-Repeat 오른쪽 상단;}. Menue li ul.sub_menu li A.Hasmenu : 호버 {배경 :#f90 URL (Arrow.png) No-Repeat 오른쪽 상단; 색상 : #ffff;}여기서 나는 두 가지 예방 조치를 강조 할 것입니다.
1. 위치에서 절대와 상대의 차이
절대 : 절대 포지셔닝, CSS는 "위치 : 절대;"로 작성되었으며 포지셔닝은 다음과 같이 두 가지 상황으로 나뉩니다.
A. 상단, 오른쪽, 하단 및 왼쪽이 설정되지 않은 경우 기본값은 부모의 "콘텐츠 영역 원래 지점"을 기반으로 원래 지점에 있습니다.
B. 상단, 오른쪽, 하단 및 왼쪽이 설정된 경우가 있습니다. 다음과 같은 두 가지 상황이 있습니다.
(1). 부모는 위치 속성이없고 브라우저의 왼쪽 상단 (즉, 본문)은 "원래 좌표 지점"으로 배치됩니다. 위치는 상단, 오른쪽, 하단 및 왼쪽 속성에 의해 결정됩니다.
(2). 부모는 위치 속성을 가지고 있으며, 부모의 "원래 포인트 조정"이 원래 지점입니다.
상대 : 상대 위치, CSS는 부모의 "Content Area Original Point"를 원래 지점으로 언급하고 부모가 없으면 신체의 "콘텐츠 영역 원래 지점"을 원래 지점으로 언급하는 "위치 : 상대;"로 작성됩니다. 위치는 상단, 오른쪽, 하단 및 왼쪽 속성에 의해 결정되며 "스트레칭 또는 점유 높이"의 기능이 있습니다.
위의 두 가지 차이점은 매우 중요하며 매우 일반적인 기술입니다. 당신은 그들을 구별해야합니다. 나는 개발에 많은 시간을 낭비하고 문제를 발견했습니다. 실제로, 그것은이 두 가지 속성으로 인해 발생합니다.
2. 배경 위치를 사용하십시오
때로는 웹 사이트의 속도를 향상시키고 웹 사이트 관리를 용이하게하기 위해 일반적으로 사용되는 작은 사진을 큰 그림에 배치합니다. CSS에 해당 작은 그림이 필요하면이 방법을 통해 달성 할 수 있습니다. 우리가 의미하는 바를 이해하는 한 전화가 매우 편리합니다. 이 방법은 흰색 점이 이미지 인터셉트 함수이며 사용 세부 사항은 다음과 같습니다.
문법:
배경 위치 : 길이 || 길이
배경 위치 : 위치 || 위치
값:
길이 : 백분율 | 부동 소수점 번호 및 단위 식별자로 구성된 길이 값.
위치 : 상단 | 센터 | 하단 | 왼쪽 | 센터 | 오른쪽
설명 :
객체의 배경 이미지 위치를 설정하거나 검색합니다. 배경 이미지 속성을 먼저 지정해야합니다. 이 속성 위치는 객체의 패치 속성 (패딩) 설정의 영향을받지 않습니다. 기본값은 0% 0%입니다. 현재 배경 이미지는 객체에 패치 (패딩)가 포함되지 않은 컨텐츠 영역의 왼쪽 상단에 위치됩니다. 하나의 값 만 지정되면 수평 좌표에 값이 사용됩니다. Ordinate는 기본값이 50%입니다. 두 값이 지정되면 두 번째 값은 세로 사용됩니다. 수평 축 값이 중심 값을 무시하기 때문에 값이 오른쪽 중심으로 설정되면, 배경 이미지가 오른쪽에 배치됩니다. 다음은 몇 가지 방정식입니다
왼쪽 상단, 왼쪽 상단은 0% 0%에 해당합니다.
상단, 상단 센터, 중앙 상단은 50% 0%에 해당합니다.
오른쪽 상단, 오른쪽 상단은 100% 0%에 해당합니다.
왼쪽, 왼쪽 중앙, 중앙 왼쪽은 0% 50%에 해당합니다.
센터, 센터 센터는 50% 50%에 해당합니다.
오른쪽, 오른쪽 센터, 오른쪽 중앙은 100% 50%에 해당합니다.
왼쪽 하단, 왼쪽 하단은 0% 100%에 해당합니다.
하단, 하단 중앙, 중앙 하단은 50% 100%에 해당합니다.
하단 오른쪽, 오른쪽 하단은 100% 100%에 해당합니다.
3. JS 코드
이 메뉴는 jQuery를 기반으로하므로 먼저 jQuery 코드베이스를 소개 한 다음 다음 JS 코드를 작성하여 드롭 다운 메뉴를 구현해야합니다.
<script src = "js/jquery.min.js"> </script> <cript> $ (document) .ready (function () {내비게이션을위한 기본 하이컬링 설정이 메뉴와 관련이 없습니다. 마지막 밑줄을 제거하십시오. if ($ (this) .find ( "ul"). length! = 0) {$ (this) .find ( "a : first"). addClass ( "hasmenu"}}}) // $ ( ". menue li"). hover (function () {$ (this) .addclass ( "now"); var 메뉴 = $ (this); 메뉴 (ul.sub_menu). show (); submenu.css ({왼쪽 : "100px", 상단 : "0px"}) $ ( ". sub_menu li"). 호버 (function () {$ (this) .find ( "a : first"). addClass ( "now") $ (this) .find ( "ul : first"); {) {) {) { $ (이)위의 단계를 통해 일반적인 다중 레벨 메뉴가 실현됩니다. 위의 코드는 일상 개발의 축적입니다. 제한된 수준으로 인해 많은 실수가있을 수 있습니다. 동료들이 내 참조를 위해 더 최적화 된 코드를 비판하고 수정하거나 제안하기를 바랍니다. 감사합니다.
Universal Infinitus 드롭 다운 메뉴의 위 구현 코드는 내가 공유 한 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.