JS+CSS의 내비게이션 효과 구현의 예

저자：Eve Cole 업데이트 시간：2025-05-23 02:48:01

이 기사에서는 JS+CSS에 의해 내비게이션 효과를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.

1. 프로그램 코드는 다음과 같습니다.

코드 사본은 다음과 같습니다. <! doctype html public "-// w3c // dtd xhtml 1.1 // en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<헤드>

<title> CSS+JS는 호환성이 우수한 무한 레벨 드롭 다운 메뉴를 구현합니다 </title>

<스타일 유형 = "텍스트/CSS">

*{마진 : 0; 패딩 : 0; 국경 : 0;}

Body {font : 12px/130% Verdana, 제네바, Arial, Helvetica, Sans-serif, 安体;} li {List-Style : None;}

.ClearFix : {after {content : ""; display : block; height : 0; clear : 둘 다; 가시성 : 숨겨진;}. clearfix {display : inline-block;}

A : 링크 {색상 :#000; 텍스트 결정 : 없음; }

A : 방문 {색상 :#000; 텍스트 결정 : 없음; }

A : 호버 {색상 :#000; 텍스트 결정 : 없음; }

.menu {너비 : 778px; 높이 : 26px; 배경 : #ffff; 여백 : 0 Auto;}

.menusel {float : 왼쪽; 너비 : 100px; 위치 : 상대; 높이 : 25px; 배경 : #ddd; 라인 높이 : 25px; 마진 왼쪽 : 1px; *마진-왼쪽 : 0px; _margin-left : -1px;}

.menusel H2 {font-size : 12px; }

.menusel a {display : block; 텍스트-정렬 : 중심; 너비 : 100px; 테두리 : 1px 고체 #a4a4a4; 높이 : 25px; 국경 바닥 : 1px 고체 #A4A4A4; 위치 : 상대; z- 안수 : 2;}

.menusel a : 호버 {테두리 : 1px 고체 #a4a4a4; 국경-바닥 : 1px 점선 #eeeeeeee; 위치 : 상대; z- 인덱스 : 2; 높이 : 25px;}

.ahover a {border-bottom : 1px dashed #eeeeeeee; 배경 : #eeeeeeee; }

위치 {위치 : 절대; z- 안수 : 1;}

.menusel ul {너비 : 125px; 배경 : #eee; 테두리 : 1px 고체 #A4A4A4; 마진 -탑 : -1px; 위치 : 상대; z- 인덱스 : 1; 디스플레이 : 없음;}

.menusel .Block {display : block;}

.Typeul li {Border-Bottom : 1px 점선 #a4a4a4; 너비 : 125px; 위치 : 상대; 플로트 : 왼쪽; }

.Typeul li a {테두리 : 없음; 너비 : 125px; }

.typeul li a : 호버 {국경 : 없음; 배경 : #ddd;}

.typeul {margin-left : 0; }

.typeul ul {왼쪽 : 125px; 상단 : 0; 위치 : 절대;}

.fli {마진 -왼쪽 : -1px; 왼쪽 경계 : #eeeeee solid 1px;}

.menusel .lli {국경 : 없음; }

</스타일>

</head>

<body>

<div>

<div>

<ul>

<li>

<ul>

</ul>

</li>

</ul>

</div> <!-위치->

</div> <!-메뉴->

<div>

<ul>

<ul>

<ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div> <!-위치->

</div> <!-메뉴->

<div>

<ul>

<ul>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div> <!-위치->

</div> <!-메뉴->

for (var x = 1; x <4; x ++)

{{

var menuid = document.getElementById ( "menu"+x);

menuid.num = x;

유형();

}

함수 유형 ()

{{

var menuh2 = menuid.getElementsByTagName ( "h2");

var menuul = menuid.getElementsByTagName ( "ul");

var menuli = menuul [0] .getElementsByTagName ( "li");

menuh2 [0] .onmouseover = show;

menuh2 [0] .onmouseout = unshow;

Menuul [0] .onmouseover = show;

MENUUL [0] .ONMOUSEOUT = UNSHOW;

함수 show ()

{{

menuul [0] .classname = "Clearfix Typeul Block"

}

함수 unshow ()

{{

menuul [0] .classname = "typeul"

}

for (var i = 0; i <menuli.length; i ++)

{{

menuli [i] .num = i;

var liul = menuli [i] .getElementsByTagName ( "ul") [0];

if (liul)

{{

타이핑 ()

}

함수 타자 ()

{{

menuli [i] .onmouseover = showul;

menuli [i] .onmouseout = Unshowul;

}

함수 showul ()

{{

menuli [this.num] .getElementsByTagName ( "ul") [0] .className = "block";

}

기능 unshowul ()

{{

menuli [this.num] .getElementsByTagName ( "ul") [0] .className = "";

}

</스크립트>

</body>

</html>

2. 프로그램 효과

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.