Aide pour un sous menu
miss_rose
-
Lecineman -
Lecineman -
Bonjour,
je voudrais svp creer un sous menu pour produit ou il y aurra un sous menu particulier et professionel
voila le code html
<div id="navMain">
<!--nav start -->
<div id="nav">
<ul class="niveaux1">
<li><a href="index.html">ACCUEIL</a></li>
<li><a href="qui_somme_nous.html">QUI SOMME NOUS?</a></li>
<li class="sousmenu"><a href="nos_produits.html"class="hover">NOS PRODUITS</a>
<ul>
<li><a href="#">professionnel</a></li>
<li><a href="#">particulier</a></li>
</ul>
</li>
<li><a href="contact.html">CONTACTEZ NOUS</a></li>
</ul>
et le code css
div#nav ul.niveaux1 li.sousmenu:hover{display:block
#navMain{
width:100%;
height:24px;
background:url(images/nav_bg.gif) 0 0 repeat-x;
}
#nav{
width:892px;
margin:0 auto;
height:24px;
}
#nav ul{
width:746px;
height:24px;
background:url(images/nav_div.gif) left top no-repeat;
float:left;
}
#nav ul li{
float:left;
background:url(images/nav_div.gif) right top no-repeat;
height:24px;
line-height:0;
font-size:0;
padding:0 2px 0 0;
}
#nav ul li a{
display:block;
background:url(images/nav_bg.gif) 0 0 repeat-x;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#B5B5B5;
background-color:inherit;
text-decoration:none;
padding:0 12px 0 10px;
}
#nav ul li a:hover{
background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
color:#fff;
background-color:inherit;
}
#nav ul li a.hover{
display:block;
background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
text-decoration:none;
padding:0 12px 0 10px;
}
#nav a.login{
display:block;
background:url(images/login_bg.gif) 0 0 no-repeat;
width:60px;
height:24px;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#232323;
background-color:inherit;
text-decoration:none;
text-align:center;
float:right;
padding:0;
margin:0;
}
#nav a.login:hover{
color:#E5A923;
background-color:inherit;
}
je voudrais svp creer un sous menu pour produit ou il y aurra un sous menu particulier et professionel
voila le code html
<div id="navMain">
<!--nav start -->
<div id="nav">
<ul class="niveaux1">
<li><a href="index.html">ACCUEIL</a></li>
<li><a href="qui_somme_nous.html">QUI SOMME NOUS?</a></li>
<li class="sousmenu"><a href="nos_produits.html"class="hover">NOS PRODUITS</a>
<ul>
<li><a href="#">professionnel</a></li>
<li><a href="#">particulier</a></li>
</ul>
</li>
<li><a href="contact.html">CONTACTEZ NOUS</a></li>
</ul>
et le code css
div#nav ul.niveaux1 li.sousmenu:hover{display:block
#navMain{
width:100%;
height:24px;
background:url(images/nav_bg.gif) 0 0 repeat-x;
}
#nav{
width:892px;
margin:0 auto;
height:24px;
}
#nav ul{
width:746px;
height:24px;
background:url(images/nav_div.gif) left top no-repeat;
float:left;
}
#nav ul li{
float:left;
background:url(images/nav_div.gif) right top no-repeat;
height:24px;
line-height:0;
font-size:0;
padding:0 2px 0 0;
}
#nav ul li a{
display:block;
background:url(images/nav_bg.gif) 0 0 repeat-x;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#B5B5B5;
background-color:inherit;
text-decoration:none;
padding:0 12px 0 10px;
}
#nav ul li a:hover{
background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
color:#fff;
background-color:inherit;
}
#nav ul li a.hover{
display:block;
background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
text-decoration:none;
padding:0 12px 0 10px;
}
#nav a.login{
display:block;
background:url(images/login_bg.gif) 0 0 no-repeat;
width:60px;
height:24px;
font:bold 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#232323;
background-color:inherit;
text-decoration:none;
text-align:center;
float:right;
padding:0;
margin:0;
}
#nav a.login:hover{
color:#E5A923;
background-color:inherit;
}
2 réponses
-
Si tu connait suffisamment tu pourait utiliser jQuery ....
Avec les effets fadeIn() et fadeOut() . -
Salut,
Voici un menu, je ne sais pas trop, si c'est ce que tu voulais, t'as plus qu'a copier le code. Regarde les commentaire sur le code pour plus d'infos.
<html> <head> <style> a { text-decoration: none; font-family: 'Fugaz One', Arial; color: #992b21; -webkit-transition-duration: 350ms; /* Ici animation de la couleur de l'arrière plan */ -webkit-transition-property: background-color; -webkit-transition-timing-function: ease; -moz-transition-duration: 350ms; -moz-transition-property: background-color; -moz-transition-timing-function: ease; -o-transition-duration: 350ms; -o-transition-property: background-color; -o-transition-timing-function: ease;} /* Fin de l'animation */ a:hover { color: white; background-color: #992b21; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;} .sousmenu ul {display: none;} ul {list-style: none; } ul li {margin: 10px; padding: 5px;} </style> <title> Test formum</title> <link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'> <!-- Pour la police du menu 'Fugaz One' --> </head> <body> <div id="navMain"> <!--nav start --> <nav> <!-- La balise nav est mieux que le div pour un menu, elle fait partie des nouvelles balises HTML--> <ul class="niveaux1"> <li><a href="index.html">ACCUEIL</a></li> <li><a href="qui_somme_nous.html">QUI SOMME NOUS?</a></li> <li class="sousmenu"><a href="javascript:void(0)"class="hover">NOS PRODUITS</a> <ul> <li><a href="http://google.com">professionnel</a></li> <li><a href="#">particulier</a></li> </ul> </li> <li><a href="contact.html">CONTACTEZ NOUS</a></li> </ul> </nav> </div> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <!-- La on charge jQuery --> <script> <!-- code jQuery pour l'animation du sous-menu --> $('.sousmenu').click(function(){ // au clic de nos produit : .sous-menu $('.sousmenu ul').toggle('slow'); // le sous-menu apparait ou disparait grace a .toggle() }); </script> </body>
Bon courage, et dis-moi, si c'est ça que tu voulais
