Cet article décrit la méthode de mise en œuvre des effets de navigation par JS + CSS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
1. Le code du programme est le suivant:
La copie de code est la suivante: <! Doctype html public "- // w3c // dtd xhtml 1.1 // en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> CSS + JS implémente un menu déroulant de niveau infini avec une bonne compatibilité </TITME>
<style type = "text / css">
* {margin: 0; rembourrage: 0; Border: 0;}
Body {Font: 12px / 130% Verdana, Genève, Arial, Helvetica, Sans-Serif, 安体;} li {list-style: Aucun;}
.ClearFix: après {Contenu: ""; Affichage: Block; Hauteur: 0; Clear: les deux; visibilité: cachée;}. ClearFix {affichage: Block en ligne;}
A: lien {couleur: # 000; Décoration du texte: aucune; }
A: Visité {couleur: # 000; Décoration du texte: aucune; }
A: Hover {Color: # 000; Décoration du texte: aucune; }
.Menu {largeur: 778px; hauteur: 26px; Contexte: #FFFF; marge: 0 auto;}
.Menusel {float: gauche; largeur: 100px; Position: relative; hauteur: 25px; Contexte: #ddd; hauteur de ligne: 25px; marge-gauche: 1px; * marge-gauche: 0px; _margin-left: -1px;}
.Menusel H2 {Font-Size: 12px; }
.Menusel a {affichage: bloc; texte-aligne: Centre; Largeur: 100px; bordure: 1px solide # A4A4A4; hauteur: 25px; Border-Bottom: 1px solide # A4A4A4; Position: relative; Z-Index: 2;}
.Menusel A: Hover {Border: 1px solide # A4A4A4; Border-Bottom: 1px en pointillé #Eeeeeeeee; Position: relative; Z-Index: 2; hauteur: 25px;}
.Ahover a {Border-Bottom: 1px en pointillé #eeeeeee; Contexte: #EEEEEEEE; }
.Position {Position: Absolute; z-index: 1;}
.Menusel ul {largeur: 125px; Contexte: #eee; Border: 1px solide # A4A4A4; marge: -1px; Position: relative; Z-Index: 1; Affichage: aucun;}
.Menusel .Block {affichage: bloc;}
.Typeul Li {Border-Bottom: 1px en pointillé # a4a4a4; largeur: 125px; Position: relative; flottant: à gauche; }
.Typeul li a {border: Aucun; largeur: 125px; }
.Typeul li a: Hover {border: aucun; Contexte: #ddd;}
.Typeul {margin-left: 0; }
.Typeul ul {Left: 125px; en haut: 0; Position: absolue;}
.fli {margin-left: -1px; Border-Left: #eeeeee solide 1px;}
.Menusel .lli {Border: Aucun; }
</ style>
<script type = "text / javascript"> document.execcommand ("backgroundImageCache", false, true); </cript> <! - IE6 Problème de scintillement de l'image d'arrière-plan ->
</ head>
<body>
<div>
<div id = "menu1">
<h2> <a href = "/"> menu 1 </a> </h2>
<div>
<ul>
<li> <a href = "// www.vevb.com"> Option de menu 1-2 </a> </li>
<li>
<a href = "#"> Option de menu 1-2 </a>
<ul>
<li> <a href = "#"> Option de menu 1-2-1 </a> </li>
<li> <a href = "#"> Option de menu 1-2-2 </a> </li>
</ul>
</li>
<li> <a href = "// www.vevb.com"> Option de menu 1-2 </a> </li>
<li> <a href = "#"> Option de menu 1-2 </a> </li>
</ul>
</div> <! - Position ->
</div> <! - Menusel ->
<div id = "menu2">
<h2> <a href = "#"> menu 2 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Option de menu 2-2 </a> </li>
<li> <a href = "#"> Option de menu 2-2 </a>
<ul>
<li> <a href = "#"> Option de menu 2-2-1 </a> </li>
<li> <a href = "#"> Option de menu 2-2-2 </a>
<ul>
<li> <a href = "#"> Option de menu 2-2-1 </a> </li>
<li> <a href = "#"> Option de menu 2-2-2 </a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Option de menu 2-2 </a> </li>
<li> <a href = "#"> Option de menu 2-2 </a> </li>
</ul>
</div> <! - Position ->
</div> <! - Menusel ->
<div id = "menu3">
<h2> <a href = "#"> menu 3 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Option de menu 3-2 </a> </li>
<li> <a href = "#"> Option de menu 3-2 </a>
<ul>
<li> <a href = "#"> Option de menu 3-2-1 </a> </li>
<li> <a href = "#"> Option de menu 3-2-2 </a>
<ul>
<li> <a href = "#"> Option de menu 3-2-1 </a> </li>
<li> <a href = "#"> Option de menu 3-2-2 </a>
<ul>
<li> <a href = "#"> Option de menu 3-2-1 </a> </li>
<li> <a href = "#"> Option de menu 3-2-2 </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Option de menu 3-2 </a> </li>
<li> <a href = "#"> Option de menu 3-2 </a> </li>
</ul>
</div> <! - Position ->
</div> <! - Menusel ->
</div> <! - Menu ->
<script type = "text / javascript">
pour (var x = 1; x <4; x ++)
{
var menuID = document.getElementById ("menu" + x);
menuID.num = x;
taper();
}
Type de fonction ()
{
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 = Unhow;
fonction show ()
{
Menuul [0] .className = "ClearFix Typeul Block"
}
fonction non show ()
{
menuul [0] .classname = "typeul"
}
pour (var i = 0; i <menuli.length; i ++)
{
menuli [i] .num = i;
var liul = menuli [i] .getElementsByTagName ("ul") [0];
si (liul)
{
tyseshow ()
}
}
fonction tyshow ()
{
menuli [i] .onMouseOver = showul;
Menuli [i] .onMouseout = Unshowul;
}
fonction showul ()
{
menuli [this.num] .getElementsByTagName ("ul") [0] .classname = "block";
}
fonction Unshowul ()
{
menuli [this.num] .getElementsByTagName ("ul") [0] .classname = "";
}
}
</cript>
</docy>
</html>
2. Effets du programme
J'espère que cet article sera utile à la programmation JavaScript de tous.