18041 sujets

Questions générales et questions de débutants

Transformer mon menu vertical en un menu horizontal

Bonjour,

J'ai crée (grâce aux tutos de ce site) un menu vertical qui marche très bien avec du javascript, du html + du css.
Aujourd'hui je souhaiterai le transformer en un menu horizontal et déroulant pour améliorer le design de mon site.

J'ai cherché sur le web. Certains parlent du display : inline, ou du float : left pour le transformer en un menu horizontal. Après certains tests infructueux, je demande votre aide.

Je souhaite que Menu 1 - Menu 2 - Menu 3, apparaissent horizontalement. Et que lorsqu'on clique sur menu 1, le menu 1 se déroule faisant apparaitre les sous-menus. Et lorqu'on clique sur les sous-menus, les sous-sous-menus apparaissent.

Merci d'avance pour vos réponses et votre aide.

A bientôt.

Voici mon code html :


<div id="menu">
		 		 
	 <div class="sous-menu">
	 <h3>Menu 1</h3>
	 
	 <ul class="navigation"> 
<li class="toggleSubMenu"><span>Menu 1.1</span>
<ul class="subMenu">
<li><a href=".html">Menu 1.1.1</a></li>
<li><a href=".html">Menu 1.1.2</a></li>
<li><a href=".html">Menu 1.1.3</a></li>
<li><a href=".html">Menu 1.1.4</a></li>
</ul>
</li>

<li class="toggleSubMenu"><span>Menu 1.2</span>
<ul class="subMenu">
<li><a href=".html">Menu 1.2.1</a></li>
<li><a href=".html">Menu 1.2.2</a></li>
<li><a href=".html">Menu 1.2.3</a></li>
<li><a href=".html">Technologie SAW</a></li>
</ul>
</li>

</div>
<div class="sous-menu">
<li><a href=".html">Menu 2</a></li>
<li><a href=".html">Menu 3</a></li>
</div>
</div>


Et voici mon code css (il est long) :



.navigation {
      margin: 0;
      padding: 0;
      list-style: none;
      background: #7B7C8B;
      color: #fff;
      width: 9.8em;
      font: 1.12em Arial, Helvetica, "Nimbus Sans L", sans-serif;
      }
   .navigation a, .navigation span {
      display: block;
      padding: 0.2em;
      color: white;
	  font-size:0.85em;
      text-decoration: none;
      background:  url(menu-item.png) left bottom no-repeat;
      }
	  
	  

   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
      background-image: url(menu-item-deroule.png);
	   
      }
   .navigation .open a, .navigation .open span {
      background-image: url(menu-item-enroule.png);
      }
   .navigation a:hover, .navigation a:focus, .navigation a:active {
      text-decoration: underline;
      }
   .navigation .subMenu {
      font-size: .9em;
      background: #ccc url(subMenu.png) 0 0 repeat-x;
     
      margin: 0;
      padding: 0;
      
      }
   .navigation ul.subMenu a {
      background: none;
	  color:black;
            }

.navigation .subMenu open_at_load
{font-size: .9em;
color:red;
      background: #ccc url(subMenu.png) 0 0 repeat-x;
   
      margin: 0;
      padding: 0;
      border-bottom: 0.07em solid white;
      }
		
			

.sous-menu h3
{
border:0.07em solid #7B7C8B;
text-align:center;
color:white;
background-color:#7B7C8B;
}
Bonjour Patidou et merci pour ce lien très intéressant.

C'est effectivement ce que je souhaite faire mais malheureusement, vu que je débute, j'ai pas tout compris.

Il faut que je crée une page css appelé "superfish.css" et une autre "superfish-navbar.css" ?
Si c'est le cas, qu'est ce que je mets dedans ??

Puis je dois mettre sur chaque page de mon site avant le body :

<script type="text/javascript" src="hoverIntent.js"></script> 
<script type="text/javascript" src="superfish.js"></script> 
 
// initialise Superfish 
<script type="text/javascript"> 
 
    $(document).ready(function(){ 
        $("ul.sf-menu").superfish({ 
            pathClass:  'current' 
        }); 
    }); 
 
</script>


Et pour tous les menus ou sous-menus qui doivent se dérouler je dois leur donner un nom de class. Exemple dans notre cas "sf-menu ?

Bref j'ai besoin d'aide pour comprendre.

Mais si je comprends bien il faut que je récrie tout mon code ?

Merci d'avance pour les éclaircissements.

A+
Sujet clos
Aller à