먼저 선언 :
몇 년 동안 웹의 프론트 엔드 위치에서 일했지만 그 위치에 대한 높은 기술적 요구 사항은 없습니다. HTML 및 CSS는 더 자주 사용되며 원본 JavaScript는 거의 없으며 기본적으로 사본 수정됩니다. 그래서 내가 실제로 글을 쓸 때, 나는 기초가 견고하지 않다는 것을 알았고, 배우고 연습했고, 많이 얻었습니다.
생식 이미지 :
더 이상 말도 안되는 포스트 코드가 없습니다
1. CSS 코드
코드 사본은 다음과 같습니다.
A : 링크 {색상 : 흰색; 텍스트 설명 : 없음;}
A : 방문 {컬러 : 흰색; 텍스트 설명 : 없음;}
A : 호버 {색상 : 흰색; 텍스트 설명 : 없음;}
A : Active {Color : White; 텍스트 설명 : 없음;}
li {float : 왼쪽; 디스플레이 : 인라인; 배경색; 배경색 :#003366; 너비 : 120px; 텍스트-정렬 : 중심; 마진 : 2px; 패딩 : 10px 0 5px 0; 위치 : 상대;}
.limouseover {배경색 :#0033ff; 색상 : 빨간색;}
.limouseout {배경색 :#003366; 색상 : 검은 색;}
li ul {display : none; 너비 : 120px; 위치 : 절대; 왼쪽 : 0; 상단 : 30px;}
Li ul Li {마진 : 0px Auto; Border-Top : 1px Solid #006699;}
2. JavaScript 코드
코드 사본은 다음과 같습니다.
<스크립트 언어 = javaScript>
기능 메뉴 (메뉴 1) {
// 마우스를 안팎으로 움직여 클래스 이름 토글과 숨기고 토글을 표시합니다.
if (document.getElementById (menu1)) {
var menu_ul = document.getElementById (menu1);
if (menu_ul.getElementsByTagName ( "li"). length) {
var menu_li = menu_ul.getElementsByTagName ( "li");
for (i in menu_li) {
menu_li [i] .onmouseover = function () {this.classname = "limouseover"; if (this. this.getElementsByTagName ( "ul"). length) {this.getElementsByTagName ( "ul") [0] .style.display = "block"}}
menu_li [i] .onmouseout = function () {this.classname = "limouseout"; if (this. this.getElementsByTagName ( "ul"). length) {this.getElementsByTagName ( "ul") [0] .style.display = "none";}}
}
}
}
}
</스크립트>
3. HTML 코드
코드 사본은 다음과 같습니다.
<ul id = menu1>
<li> <a href = ""> home </a> </li>
<li> <a href = ""> 메뉴 1 메뉴 1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> 메뉴 2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
</ul>
<cript> var menu1 = 새 메뉴 ( "menu1"); </script>
설명 :
1. UL 및 Li 페이지가 더 자주 사용되기 때문에 CSS 전에 #Menu1을 추가하여 메뉴 스타일의 범위를 제한 할 수 있습니다.
2. JS는 주로 마우스 움직임 및 제거 이벤트를 듣고 Limouseover 및 Limouseout 스타일로 전환합니다. 동시에, 하위 메뉴의 디스플레이 속성을 변경하여 숨겨진 표시의 기능을 달성합니다.
3. 같은 페이지를 충돌없이 반복적으로 호출 할 수 있습니다. HTML 코드의 JavaScript 코드는 호출 인스턴스입니다. 이전의 Menu1은 임의의 변수 이름이며 브래킷의 메뉴 1은 HTML 페이지의 ID입니다.
이 예제의 단점 :
1. 메뉴의 마우스 오버, 마우스 아웃 및 하위 메뉴 Li는 동일합니다. 즉, 동일한 색상과 글꼴이며 별도의 설정이 없습니다.
2. IE6 및 IE7과 호환되므로 위치 : 절대가 사용되고 왼쪽 및 상단 속성이 추가됩니다. 메뉴 Li의 전체 높이에 따라 상단을 설정해야합니다.