A voir également:
- Question pour modifier un menu
- Modifier dns - Guide
- Modifier menu déroulant excel - Guide
- Modifier story facebook - Guide
- Comment modifier un pdf - Guide
- Modifier extension fichier - Guide
1 réponse
Bonjour,
J'ai suivi ce tutoriel: http://webiswell.fr/cgi-sys/suspendedpage.cgiry-css-798/ pour faire mon menu et j'ai deux petits questions.
-1er question:
J'ai deux menus qui sont cote à cote et chacun possède un sous menu. Mais lorsque je veux ouvrir l'un des menus et que celui-ci, j'ai les deux qui s'ouvrent. Comment dois je faire pour que ce soit que le menu désigné qui se déroule!?
-2ème question:
Ensuite j'aimerai que le sous menu apparaisse au passage de la souris et non quand on clic. Comment faire!?
Voila mon code HTML:
<html>
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Menu_jQuery/includes/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".menu .menu_liste li:even").addClass("alt");
$(".menu .menu_bouton").click(function () {
$(".menu .menu_liste").slideToggle("medium");
});
$(".menu .menu_liste li a").mouseover(function () {
$(this).animate({ fontSize: "18px", paddingLeft: "15px" }, 50 );
});
$(".menu .menu_liste li a").mouseout(function () {
$(this).animate({ fontSize: "15px", paddingLeft: "3px" }, 50 );
});
});
</script>
</head>
<body>
<div class="menu" id="texte3">
<img src="Membres.JPG" height="30" class="menu_bouton" id="texte3" />
<ul class="menu_liste" id="texte3">
<li><a href="staff.html" title="Membres du staff" target="_self">STAFF</a></li>
<li><a href="membres.html" title="Les membres de l'équipe" target="_self">Membres</a></li>
<li><a href="membres_d_honneur.html" title="Nos Membres d'honneur" target="_self">Membres d'honneur</a></li>
<li><a href="devenir_membre.html" target="_self" title="Comment devenir membre">Devenir membre</a></li>
</ul>
</div>
<div class="menu" id="texte4">
<img src="Le site.JPG" height="30" class="menu_bouton" id="texte4" />
<ul class="menu_liste" id="texte4" >
<li><a href="historique.htm" title="A propos" target="_self">A propos du SG-4F</a></li>
<li><a href="stand.htm" title="Notre stand" target="_self">Notre Stand</a></li>
<li><a href="photos.html" title="Galerie photos">Galerie photos</a></li>
<li><a href="liens.htm" title="Partenaire" target="_self">Partenaire</a></li>
</ul>
</div>
</table>
</body>
</html>
Voila le code CSS:
.accueil{
background: #C7D0D1
}
.error404{
background: #C7D0D1
}
ul, li {
margin: 0;
padding: 0;
list-style:none;
font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
font-size: 13px;
}
div#texte1{
float:left;
}
div#texte2{
float:left;
}
div#texte3{
float:left;
}
div#texte4{
float:left;
}
div#texte5{
float:left;
}
.menu {
height: auto;
background-color: #000000;
display:block;
text-align:left;
}
.menu .menu_liste {
display:none;
position:absolute;
background-color: #000000;
margin-left: 2px;
}
.menu .menu_liste li a {
display:block;
padding-top:7px;
padding-bottom:7px;
padding-left: 20px;
text-decoration:none;
color: #FFFFFF;
}
.menu .menu_liste li.alt {
background:#000000;
}
Merci d'avance de votre aide.
J'ai suivi ce tutoriel: http://webiswell.fr/cgi-sys/suspendedpage.cgiry-css-798/ pour faire mon menu et j'ai deux petits questions.
-1er question:
J'ai deux menus qui sont cote à cote et chacun possède un sous menu. Mais lorsque je veux ouvrir l'un des menus et que celui-ci, j'ai les deux qui s'ouvrent. Comment dois je faire pour que ce soit que le menu désigné qui se déroule!?
-2ème question:
Ensuite j'aimerai que le sous menu apparaisse au passage de la souris et non quand on clic. Comment faire!?
Voila mon code HTML:
<html>
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Menu_jQuery/includes/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".menu .menu_liste li:even").addClass("alt");
$(".menu .menu_bouton").click(function () {
$(".menu .menu_liste").slideToggle("medium");
});
$(".menu .menu_liste li a").mouseover(function () {
$(this).animate({ fontSize: "18px", paddingLeft: "15px" }, 50 );
});
$(".menu .menu_liste li a").mouseout(function () {
$(this).animate({ fontSize: "15px", paddingLeft: "3px" }, 50 );
});
});
</script>
</head>
<body>
<div class="menu" id="texte3">
<img src="Membres.JPG" height="30" class="menu_bouton" id="texte3" />
<ul class="menu_liste" id="texte3">
<li><a href="staff.html" title="Membres du staff" target="_self">STAFF</a></li>
<li><a href="membres.html" title="Les membres de l'équipe" target="_self">Membres</a></li>
<li><a href="membres_d_honneur.html" title="Nos Membres d'honneur" target="_self">Membres d'honneur</a></li>
<li><a href="devenir_membre.html" target="_self" title="Comment devenir membre">Devenir membre</a></li>
</ul>
</div>
<div class="menu" id="texte4">
<img src="Le site.JPG" height="30" class="menu_bouton" id="texte4" />
<ul class="menu_liste" id="texte4" >
<li><a href="historique.htm" title="A propos" target="_self">A propos du SG-4F</a></li>
<li><a href="stand.htm" title="Notre stand" target="_self">Notre Stand</a></li>
<li><a href="photos.html" title="Galerie photos">Galerie photos</a></li>
<li><a href="liens.htm" title="Partenaire" target="_self">Partenaire</a></li>
</ul>
</div>
</table>
</body>
</html>
Voila le code CSS:
.accueil{
background: #C7D0D1
}
.error404{
background: #C7D0D1
}
ul, li {
margin: 0;
padding: 0;
list-style:none;
font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
font-size: 13px;
}
div#texte1{
float:left;
}
div#texte2{
float:left;
}
div#texte3{
float:left;
}
div#texte4{
float:left;
}
div#texte5{
float:left;
}
.menu {
height: auto;
background-color: #000000;
display:block;
text-align:left;
}
.menu .menu_liste {
display:none;
position:absolute;
background-color: #000000;
margin-left: 2px;
}
.menu .menu_liste li a {
display:block;
padding-top:7px;
padding-bottom:7px;
padding-left: 20px;
text-decoration:none;
color: #FFFFFF;
}
.menu .menu_liste li.alt {
background:#000000;
}
Merci d'avance de votre aide.