Menu accordeon casi resolu
stevecarcare
Messages postés
161
Statut
Membre
-
notobe Messages postés 2222 Statut Membre -
notobe Messages postés 2222 Statut Membre -
Bonjour,
j ai reussis a faire un menu accordeon mais j arrive pas a faire 2 sous menus pq??? merciiii (voir 1.2 distribution - probleme)
<div id="color">
<h4>1. Moteur</h4>
<p>1.1 Culasse</p>
<p>1.2 Distribution</p>
</div>
<h4>2.Carrosserie</h4>
<p>2.1 Portes avants</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h4').next('p').css('display', 'none');
$('h4').click(function() {
$(this).next('p').slideToggle(300);
});
});
</script>
j ai reussis a faire un menu accordeon mais j arrive pas a faire 2 sous menus pq??? merciiii (voir 1.2 distribution - probleme)
<div id="color">
<h4>1. Moteur</h4>
<p>1.1 Culasse</p>
<p>1.2 Distribution</p>
</div>
<h4>2.Carrosserie</h4>
<p>2.1 Portes avants</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h4').next('p').css('display', 'none');
$('h4').click(function() {
$(this).next('p').slideToggle(300);
});
});
</script>
Configuration: Windows XP Internet Explorer 7.0
2 réponses
-
salut !
alors met qqchose a deplier deja du genre un <a> ici on vas prendre un <a> pour l'exemple donc on a
<div id="color">
<h4>1. Moteur</h4>
<p>1.1 Culasse</p>
<a href=#>culasse 1</a>
<a href=#>culasse 2</a>
<a href=#>culasse 3</a>
<p>1.2 Distribution</p>
<a href=#>distrib1</a>
<a href=#>distrib 2</a>
<a href=#>distrib 3</a>
</div>
etc...
ensuite ton code devient :
$(document).ready(function() {
$('h4').next('p').css('display', 'none');
$('a).css('display', 'none');
$('h4').click(function() {
$(this).next('p').slideToggle(300);
});
$('p').click(function() {
$(this).next('a').slideToggle(300);
});
});
voila.... normalement ça devrais fonctionner ....enfin je crois.... -
Ton problème n'ayant pas encore été résolu je me permets de te répondre :)
Tu peux faire un menu sans JS ! Uniquement grâce au html / css . Voila un petit tuto .
Dans le head<head> <title>CSS Debutant : Menu horizontal déroulant réalisé uniquement à l'aide du langage CSS</title> <style type="text/CSS"> #menu { height:50px; } #menu ul { margin:0; padding:0; list-style-type:none; text-align:center; } #menu li { float:left; margin:auto; padding:0; background-color:black; } #menu li a { display:block; width:100px; color:white; text-decoration:none; padding:5px; } #menu li a:hover { color:#FFD700; } #menu ul li ul { display:none; } #menu ul li:hover ul { display:block; } #menu li:hover ul li { float:none; } </style> <!--[if !IE]> <--> <style type="text/CSS"> #menu li ul { position:absolute; } </style> <!--> <![endif]--> <!--[if IE 8]> <style type="text/CSS"> #menu li ul { position:absolute; } </style> <![endif]--> </head>
Dans le body
<body> <h1>CSS : Menu horizontal déroulant</h1> <div id="menu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a> <ul> <li><a href="#">Sous-item 1</a></li> <li><a href="#">Sous-item 2</a></li> <li><a href="#">Sous-item 3</a></li> </ul> </li> <li><a href="#">Item 3</a></li> </ul> </div>-
"petit tuto" qui vient de là...
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
(respect de la licence cc : paternité...)
-
