Contoh Implementasi Efek Navigasi oleh JS+CSS

Penulis：Eve Cole Waktu Pembaruan：2025-05-23 02:48:01

Artikel ini menjelaskan metode penerapan efek navigasi oleh JS+CSS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:

1. Kode program adalah sebagai berikut:

Salinan kode adalah sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.1 // en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<head>

<title> CSS+JS mengimplementasikan menu drop-down level tak terbatas dengan kompatibilitas yang baik </iteme>

*{margin: 0; Padding: 0; Perbatasan: 0;}

Tubuh {font: 12px/130% Verdana, Jenewa, Arial, Helvetica, sans-serif, 安体;} li {List-style: none;}

.clearfix: After {content: ""; display: block; tinggi: 0; clear: keduanya; visibilitas: tersembunyi;}. clearfix {display: inline-block;}

A: Link {Color:#000; Dekorasi Teks: Tidak Ada; }

A: Dikunjungi {Color:#000; Dekorasi Teks: Tidak Ada; }

A: Hover {Color:#000; Dekorasi Teks: Tidak Ada; }

.menu {lebar: 778px; Tinggi: 26px; Latar Belakang: #FFFF; margin: 0 auto;}

.menusel {float: left; width: 100px; Posisi: kerabat; Tinggi: 25px; Latar belakang: #ddd; Line-Height: 25px; margin-kiri: 1px; *margin-kiri: 0px; _margin-left: -1px;}

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

.menusel a {display: block; text-align: center; Lebar: 100px; Border: 1px Solid #A4A4A4; Tinggi: 25px; Border-Bottom: 1px Solid #A4A4A4; Posisi: kerabat; z-index: 2;}

.menusel a: hover {border: 1px solid #a4a4a4; Border-Bottom: 1px berlari #eeeeeeeee; Posisi: kerabat; z-index: 2; Tinggi: 25px;}

.ahover a {border-bottom: 1px putus #eeeeeeeee; Latar belakang: #eeeeeeee; }

.posisi {position: absolute; z-index: 1;}

.menusel ul {width: 125px; Latar Belakang: #EEE; Perbatasan: 1px solid #a4a4a4; margin -top: -1px; Posisi: kerabat; z-index: 1; Tampilan: Tidak Ada;}

.menusel .block {display: block;}

.typeul li {border-bottom: 1px putus #a4a4a4; lebar: 125px; Posisi: kerabat; float: kiri; }

.typeul li a {border: none; width: 125px; }

.typeul li a: hover {border: none; Latar belakang: #ddd;}

.typeul {margin-left: 0; }

.typeul ul {kiri: 125px; TOP: 0; Posisi: Absolute;}

.fli {margin -left: -1px; Border-left: #eeeeee solid 1px;}

.menusel .lli {border: none; }

</tyle>

</head>

<body>

<div>

<div>

<ul>

<li>

<ul>

</ul>

</li>

</ul>

</div> <!-Posisi->

</div> <!-Menu->

<div>

<ul>

<ul>

<ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div> <!-Posisi->

</div> <!-Menu->

<div>

<ul>

<ul>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div> <!-Posisi->

</div> <!-Menu->

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

{

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

menuId.num = x;

jenis();

}

tipe fungsi ()

{

var meneh2 = menuid.getElementsbyTagname ("h2");

var menuul = menuid.getElementsbyTagname ("UL");

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

meneh2 [0] .onmouseover = show;

meneh2 [0] .onmouseout = unshow;

menuul [0] .onmouseover = show;

menuul [0] .onmouseout = unshow;

function show ()

{

Menuul [0] .className = "ClearFix Typeul Block"

}

fungsi unshow ()

{

menuul [0] .className = "typeul"

}

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

{

Menuli [i] .num = i;

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

if (liul)

{

typeshow ()

}

fungsi typeshow ()

{

Menuli [i] .onmouseover = showul;

Menuli [i] .onmouseout = unshowul;

}

fungsi showul ()

{

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

}

fungsi unshowul ()

{

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

}

</script>

</body>

</html>

2. Efek program

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.