Bienvenue !
- Retour à la page d'accueil
- : Disons que ce petit morceau d'Internet sera le carnet en ligne de mes lectures du moment, de mes coups de coeur musicaux ou bien encore des vidéos qui m'auront fait marrer (ou pas). Ca sert à rien mais c'est ce qui rend tout ça indispensable non ?? ;) Welcome into my mind !
Rechercher
Catégories
- De tout et de rien (6)
- Et sinon sur le web ? (34)
- Boîte à outils (15)
- Jeux (17)
- Ciné (7)
- Musique (13)
- Lecture (7)
- Créations (12)
- Foutchebole (6)
- Hattrick (1)
Ca vient de sortir
Le cercle
Flux RSS
Divers
On air
Mardi 17 février 2009
2
17
/02
/2009
15:12
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>
Par Noult
-
Publié dans : Boîte à outils
Ecrire un commentaire - Voir les commentaires - Recommander
Ecrire un commentaire - Voir les commentaires - Recommander