Besoin d'aide à la création de Menu Horizontal

**°°° Zen-Spirit °°°** · 31/03/2008, 17h57

Bonjour à tous.
Voilà, j'ai besoin de votre aide à la création d'un Menu un peu simple ou un peu spécial.
Je souhaite créer un MENU HORIZONTAL à peu près comme ceci :
En fait voilà, je voudrai créer un MENU Horizontal avec lors du passage de la souris sur un onglet, une ligne horizontale contenant des liens apparaissent juste en dessous sur une ligne.
Un peu comme ceci mais en plus travailler : http://css.developpez.com/galerie/pr...talderoulant3/
Mais la difficulté c'est que veux donner une autre apparence à mon Menu et donc de coupler çà ( Je vous laisse voir ) :
LIGNE du MENU PRINCIPALE : http://css.developpez.com/galerie/pr...ets/page1.html
Et Les sous-Menus qui s'affichent sur une seule ligne en dessous lors du passage de la souris sur un des onglets doivent ressembler à çà :
http://css.developpez.com/tutoriels/...ssminitabs.htm
Merci de m'aider et de me diriger afin de réussir à coupler çà, car vous en conviendrez que c'est vraiment plus beau.
Merci encore.

**blueice** · 31/03/2008, 19h06

Suffit de régler les styles

aucune difficultée...

**°°° Zen-Spirit °°°** · 31/03/2008, 19h13

Salut Bluice !
Ben justement, je n'avais pas vu que t'étais là et je viens de t'envoyer un MP, dans la rubrique "HEBERGEMENT" ( autre sujet ).
Oui, il suffit de régler les style, c'est à dire, car je suis débutant en la matière.
En fait pour le MENU pricipal avec onglet, pas de soucis, car le code est déja fait, de même que pour l'autre menu avec la barre verte qui s'affiche en dessous le code est aussi déja fait, mais après là ou çà coince pour moi qui suis débutant c'est de faire une adaptation des deux MENU pour que le Menu avec la barre verte en dessous devienne un sous MENU du MEnu avec onglet.
Merci de m'aider et me diriger sur un bout de code ou autre.

**blueice** · 31/03/2008, 19h24

Tu dois te tromper de personne, je ne suis pas djoyeux...

Bref suffit de modifier les styles et de faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
body { color:#9c9; }
/* div item caches par defaut */
.item{
  display: none;
}
 
.lienItem{
 text-decoration: none;
color: #9c9;
}
 
/* styleOverMenu = style du menu lors de l evenement mouseover */
/* style des liens lors du hover */
.lienItem:hover, .styleOverMenu{
border-bottom: 4px solid #696;
color: #363;
}
 
/* style du menu lors de l evenement mouseout */
.styleOutMenu{
 
}

**°°° Zen-Spirit °°°** · 31/03/2008, 19h44

Euh, oui,

effectivement, je me suis trompé de pseudo à ton sujet, mais par contre c'était bien à toi que je voulais envoyer ce MP. Tu peux e renseigner à propos de ce sujet d'hébergement ?
Merci pour ton aide concernant le code Blueice. C'est très bien.
Ce que je veux c'est adapter le haut, c'est à dire le Menu principal, vu que maintenant j'arrive à faire les sous Menu avec ton code.
Je m'explique, les sous menus, maintenant je ne touche pas et çà marche Nickel avec le fichier functions.js, par contre le haut c'est à dire le MENU, c'est plus compliqué car c'est des Onglets, donc des images.
Mon soucis c'est l'adaptation de ce sous Menu avec le Menu qui ressemble à çà : http://css.developpez.com/galerie/pr...ets/page1.html
Merci encore.

**blueice** · 31/03/2008, 20h44

C'est toujours une question de CSS, aucune difficulté.
C'est un forum d'entraide, nous ne sommes pas là pour le faire à ta place.
Tu dois essayer par toi même et si tu bloques quelque part demander de l'aide.

**°°° Zen-Spirit °°°** · 31/03/2008, 23h29

Oui, je sais que c'est un forum d'aide, d'ailleurs j'ai réussi à coupler les deux codes !
merci.
Mais je pense avoir encore besoin de votre aide pour finir mon MENU.

EDIT :
Ah oui, je coince encore, pour une chose.
J'essaie de faire de, sorte qu'au passage de la souris, la couleur de l'onglet du MENU horizontale change en même temps que les SOUS MENU s'affichent.
J'ai tout essayé mais rien ne passent.

Voici mon code HTML :

<head>
<title>Menu horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript" src="functions.js"></script>
<link rel="stylesheet" href="styles_index7.css" type="text/css" />
</head>
<body>

<div id="menu" onmouseout="mouseOut()">
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu1')">ACCUEIL</span>
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu2')"> SAISON </span>  
      
     |   
       
   
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu3')"> COUPE </span>  
      
     |   
        
    
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu4')"> JEUX - PRONO </span>  
      
     |   
        
    
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu5')"> FORUM </span>  
      
     |   
        
    
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu6')"> CHAT </span>  
      
     |   
        
    

<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu7')"> FORUM </span>  
      
     |   
        
    
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu8')"> LIVRE D'OR </span>
</div>




<div id="itemVide">
</div>

<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu1" class="item">
</div>

<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu2" class="item">
<a href="#" class="lienItem">sous menu 21</a> | | 
<a href="#" class="lienItem">sous menu 22</a>
</div>

<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu3" class="item">
<a href="#" class="lienItem">sous menu 31</a> | | 
<a href="#" class="lienItem">sous menu 32</a> | | 
<a href="#" class="lienItem">sous menu 33</a> | | 

<a href="#" class="lienItem">sous menu 34</a> | | 
<a href="#" class="lienItem">sous menu 35</a> | | 
<a href="#" class="lienItem">sous menu 36</a>
</div>

<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu4" class="item">
<a href="#" class="lienItem">sous menu 41</a> | | 
<a href="#" class="lienItem">sous menu 42</a> | | 
<a href="#" class="lienItem">sous menu 43</a>
</div>

<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu5" class="item">
<a href="#" class="lienItem">sous menu 41</a> | | 
<a href="#" class="lienItem">sous menu 42</a> | | 
<a href="#" class="lienItem">sous menu 43</a>
</div>

<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu6" class="item">
<a href="#" class="lienItem">sous menu 41</a> | | 
<a href="#" class="lienItem">sous menu 42</a> | | 
<a href="#" class="lienItem">sous menu 43</a>
</div>

<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu7" class="item">
<a href="#" class="lienItem">sous menu 41</a> | | 
<a href="#" class="lienItem">sous menu 42</a> | | 
<a href="#" class="lienItem">sous menu 43</a>
</div>

<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu8" class="item">
<a href="#" class="lienItem">sous menu 41</a> | | 
<a href="#" class="lienItem">sous menu 42</a> | | 
<a href="#" class="lienItem">sous menu 43</a>
</div>

<hr />
</body>
</html>

Je vous laisse mon CODE CSS :

* {
margin: 0px;
padding: 0px;
text-align: center;
}

body {
font-family: times new roman, Helvetica, sans-serif;
color:#fffff;
margin-left: 50px;
margin-right: 50px;
}

/* div item caches par defaut */
.item{
display: none;
background:#abc url(images/fond1.jpg) 0 -45px;
}

.lienItem{
text-decoration: none;
color: #9c9;
}

/* styleOverMenu = style du menu lors de l evenement mouseover */
/* style des liens lors du hover */
.lienItem :hover, .styleOverMenu1{
border-bottom: 4px solid #696 ;
color: #363;
padding-left: 10px;.
}

/* style du menu lors de l evenement mouseout */
.styleOutMenu1{

}

#menu {
padding-top: 10px;
background: #abc url(images/fond.jpg) 0 -90px;
height:25px;
width:900px;
}

Pour explication des background - 45 et -90 dans ce code, çà correspond à cette image ci-dessous:

Donc au départ l'onglet est bleu et je qouhaite qu'au passage de la souris, l'onglet devient jaune ou rose.
Je ne comprends vraiment pas quel code mettre et où.

**Erwan31** · 31/03/2008, 23h38

Attention a ce type de menu qui pose quelques problème d'ergonomie :
le trajet du curseur pour accéder au sous rubriques peut passer au dessus
des rub. adjacentes.

**°°° Zen-Spirit °°°** · 31/03/2008, 23h50

Envoyé par Erwan31

Attention a ce type de menu qui pose quelques problème d'ergonomie :
le trajet du curseur pour accéder au sous rubriques peut passer au dessus
des rub. adjacentes.

Oui, effectivement, mais j'ai bien avancé dans ce MENU, et çà pose pas de problème pour l'instant.
Le seul soucis, c'est comme je viens de dire au dessus, je n'arrive pas à faire en sorte que lorsque je passe la souris sur le MENU qui comporte des onglets, faire en sorte que ces onglets qui au départ sont bleu deviennent rose ou jaune comme le fichier image que j'ai joints ci-dessus.
J'ai essayé pleins de code CSS mais çà ne marche pas.
Je me demande s'il ne faut pas que modifie à la base mon fichier HTML pour que les modifs en CSS suivent.
Si t'as une idée Merci.

**Erwan31** · 01/04/2008, 01h07

Le balisage de ton menu n'est pas vraiment approprié.
Lui préférer des listes non-ordonnées imbriquées (UL).
Voir cet exemple.

Besoin d'aide à la création de Menu Horizontal

HTML

Discussions similaires

Partager

Partager