Pour faire un beau menu
Vu le temps passé à écumer le web à la recherche d'un code puvant m'aider à créer un menu "accordéon" je ne peux que partager ce que j'ai trouvé, modifié et finalement réalisé. Je pense que ça aidera surement une ou deux personnes. A savoir : il faut obligatoirement télécharger le plugin de jquery : Collapsor
Il faut mettre ce plugin dans le même répertoire que votre page disposant dudit menu. Vous pouvez bien évidemment rajouter autant de menu que vous le désirez en suivant la même logique que pour ceux déjà présent. J'ai essayé de mettre dans ce code tout les cas de figure.
Je vous livre donc le code HTML et le code CSS (que je vais essayer d'annoter au mieux pour que vous puissiez modifier le graphisme a votre guise) pour réaliser un menu aux lignes épurées et donc forcément classe.
<head>
<title>Menu accordéon 3 niveaux</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.collapsor.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('ul a').collapsor();
$('dl strong').collapsor({sublevelElement:'dl', speed: 1000});
});
</script>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% Arial, Helvetica, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 20px;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 0px 0;
height: 20px;
line-height: 20px;
text-align: left;
font-weight: bold;
background: #fff;
}
dl#menu {
border-left: 3px solid #B11620 ;
}
dl#menu li {
text-align: left;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
dl#menu li a:hover, dl#menu dt a:hover, dl#menu dl a:hover {
background: #eee;
}
#mentions {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
.Style1 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<dl id="menu">
<dd>
<strong> Menu 1</strong>
<dl>
<dd>
<strong> Sous Menu 1.1</strong>
<dl>
<li>
<a href="#menu_1_1_1"> Sous Sous Menu 1.1.1</a>
</li>
<li>
<a href="#menu_1_1_2"> Sous Sous Menu 1.1.2</a>
</li>
<li>
<a href="#menu_1_1_3"> Sous Sous Menu 1.1.3</a>
</li>
</dl>
</dd>
<dd>
<strong> Sous Menu 1.2</strong>
<dl>
<li>
<a href="#menu_1_1"> Sous Sous Menu 1.2.1</a>
</li>
</dl>
</dd>
<dd>
<strong> Sous Menu 1.3</strong>
<dl>
<li>
<a href="#menu_1_1"> Sous Sous Menu 1.3.1</a>
</li>
</dl>
</dd>
</dl>
</dd>
<dd>
<strong> Menu 2</strong>
<dl>
<li>
<a href="#menu_2_1"> Sous Menu 2.1</a>
</li>
<li>
<a href="#menu_2_2"> Sous Menu 2.2</a>
</li>
<li>
<a href="#menu_1_1"> Sous Menu 2.3</a>
</li>
</dl>
</dd>
<dd>
<strong> Menu 3</strong>
<dl>
<dd>
<strong> Sous Menu 3.1</strong>
<dl>
<li>
<a href="#menu_1_1"> Sous Sous Menu 3.1.1</a>
</li>
<li>
<a href="#menu_1_2"> Sous Sous Menu 3.1.2</a>
</li>
</dl>
</dd>
<dd>
<li>
<a href="#menu_1_2"> Sous Menu 3.2</a>
</li>
<li>
<a href="#menu_1_2"> Sous Menu 3.3</a>
</li>
<li>
<a href="#menu_1_2"> Sous Menu 3.4</a>
</li>
</dd>
</dl>
</body>
</html>
Publicité