Les menusUn article de Eric Bruyndonckx.
[modifier] VerticauxUn premier exemple tout simple (Démonstration) :
[modifier] Code HTML + JavascriptCi-dessous le contenu du fichier : index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EBX :: Menu vertical à 2 niveaux</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- appel des librairies -->
<script type="text/javascript" src="lib/js/jquery/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="lib/js/menu_vertical.js"></script>
<!-- /appel des librairies -->
<!-- appel des css -->
<link type="text/css" href="css/menu_vertical.css" rel="stylesheet"/>
<!-- /appel des css -->
</head>
<body>
<h1></h1>
<ul id="Navigation">
<li>Menu 1
<ul class="Menu">
<li><a href="#">Sous element 1.1</a></li>
<li><a href="#">Sous element 1.2</a></li>
</ul>
</li>
<li>Menu 2
<ul class="Menu">
<li><a href="# ">Sous element 2.1</a></li>
<li><a href="#">Sous element 2.2</a></li>
</ul>
</li>
</ul>
</body>
</html>
[modifier] CSSCi-dessous le contenu du fichier : menu_vertical.css /* Menu vertical 2 niveaux */
/* Identifiants */
#Navigation {
font-family: Arial;
width: 100px;
padding: 0px;
list-style: none;
}
#Navigation li {
background: #bbb;
margin: 1px;
height: 20px;
}
#Navigation li a:hover {
text-decoration: underline;
}
/* Classes */
.Menu {
padding: 0;
margin-top: -20px;
margin-left: 98px;
width: 202px;
list-style: none;
display: none;
}
.Menu li {
height: 20px;
width: 200px;
}
.Menu li a {
color: red;
text-decoration: none;
}
.Menu li a:hover {
color: blue;
}
[modifier] Voir aussi
|
![[1]](http://www.ebx.ch/mediawiki1/lab/menus/verticaux/index.txt|Image:Telecharger.png){kind=link}