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>
A voir également:
- Menu accordeon casi resolu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu démarrer - Guide
- Windows 11 menu démarrer classique - Guide
- Windows 11 menu contextuel classique - Guide
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....
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
Dans le body
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é...)
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
(respect de la licence cc : paternité...)
