Menu horizontal avec sous menu transition

Version imprimable

13/10/2011, 21h23
Tarkna

Menu horizontal avec sous menu transition

Bonjour. :)

Je suis en train de développer un site internet en html/css et je bloque sur le menu .

Il s'agit d'un menu horizontal avec des sous-catégories qui doivent apparaitre en transition lorsqu'on passe sur le bouton.

J'avais trouvé un code sympa en Jquery mais cependant le fond du bouton est le même que celui des sous-catégories ce qui ne me satisfait pas.

http://nsa22.casimages.com/img/2011/...3058543404.png

Pensez-vous avoir une idée pour résoudre mon problème ?

Je vous remercie. :)
13/10/2011, 22h30
NoSmoking

Bonsoir,
bien joli tout cela mais sans le moindre morceau de code je dirais qu'il te faut modifier le CSS des boutons lorsqu'ils sont hover, donc la class...mais bon!

Désolé pour l'oublie du code. :/

Le code html:

Code:

1
2
3
4
5
6
7
8
<div class="menuTransition">
        <ul>
                <li><a href="#">Langues</a></li>
                <li><a href="#">Comptabilité</a></li>
                <li><a href="#">Finance</a></li>
                <li><a href="#">Autres ressources</a></li>
        </ul>
</div>

Le code CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.menuTransition a{
	background-image: url('images/menupx.png');
	font-family: Helvetica LT;
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: #252634 0px 1px 2px;
	text-decoration:none;
	text-align: center;
	padding:30px;
    -webkit-transition: color .2s ease-in;
    -moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    transition: color .2s ease-in;
}
.menuTransition a:hover{
    color:#fabfab;
}
ul
{
	padding-top:15px;
	list-style-type:none;
}
li
{
	 margin-left:2px;
	 float:left;
}

Il se fait que mon menu est tout en haut de la page et impossible de le déplacer et de fixer les bonnes dimensions.

De plus, il faudrait que j'y ajoute un menu déroulant avec un effet transition.

:)

14/10/2011, 19h29
NoSmoking

Il te suffit de le placer avec les propriétés , margin, left, top... par rapport au conteneur. Le dimensionnement se fait à l'aide de width et height.

Pour l'effet de transition, si tu utilises jQuery, c'est bien le diable si il n'existe pas un plugin, les fonctions elles existent.
14/10/2011, 23h48
Tarkna

Citation:

Envoyé par NoSmoking

Il te suffit de le placer avec les propriétés , margin, left, top... par rapport au conteneur. Le dimensionnement se fait à l'aide de width et height.

Pour l'effet de transition, si tu utilises jQuery, c'est bien le diable si il n'existe pas un plugin, les fonctions elles existent.

J'ai déjà tout essayé pour les marges mais rien y fait. Pour le menu je n'ai rien trouvé qui permettait d'avoir une effet transition avec une image de fond différent à celui des boutons et du déroulant.
15/10/2011, 09h03
NoSmoking

as tu regardé ce qui ce faisait dans la galerie des menus

le changement d'image de fond se gère via les class que tu peux affecter sur les événements onmouseover et onmouseout
15/10/2011, 11h41
Tarkna

Citation:

Envoyé par NoSmoking

as tu regardé ce qui ce faisait dans la galerie des menus

le changement d'image de fond se gère via les class que tu peux affecter sur les événements onmouseover et onmouseout

Oui j'ai déjà regardé les menus proposés, cependant je n'en trouve pas un qui déroule le menu en transition (ou fondant) comme celui-ci : http://www.astucesdewebmaster.com/menu.html

Le problème, c'est que je ne peux pas avoir un fond différent pour pour "Test 1" et ses "Sous-catégories".

J'espère avoir réussi à me faire comprendre. ^^

Merci en tout cas pour ton aide. :)
15/10/2011, 22h51
NoSmoking
Citation:

Le problème, c'est que je ne peux pas avoir un fond différent pour pour "Test 1" et ses "Sous-catégories".

Il te faut jouer avec les pseudo-classes dynamiques dans ta feuille de style
Code:

1 2 3 a:hover { background: #808080; /* par exemple */ }
18/10/2011, 18h10
Tarkna
J'ai essayé ce que tu m'as proposé mais rien n'y fait.

J'ai chargé le menu en question sur mon ftp : http://tarkna.free.fr/menu/

Comment tu peux voir sur le lien, je mets une fois un fond transparent pour "Test 1&2" et il s'ajoute meme pour le déroulant en 2 fois.

Tarkna. :)

EDIT: J'ai essayé avec les 3 et ca ne fonctionne tjrs pas.
Code:

1 2 3 4 5 6 7 8 9 10 11 a:hover { background: #ffffff; } #Nav a:hover { background: #ffffff; } .menu a:hover { background: #ffffff; }

tu n'as pas essayé avec

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#Nav li a {
  display: block;
  background-color: #f0f0f0;  /* ajout */
  color : black;
  text-decoration: none;
  margin: 0;
  padding: 3px;
}
#Nav li a:hover,#Nav li a:active {
  display: block;
  background-color: #606080; /* modif color */
  color: white;
  text-decoration: none;
  margin: 0;
  padding: 3px;
}

19/10/2011, 14h04
Tarkna

Ca marche parfaitement en effet !

Par-contre impossible de le coller en bas de la div du bando comme dans cette capture de mon 1er post.
J'ai aussi un autre problème, comme tu peux voir dans la capture j'ai des nom de "sous-catégories" (Anglais, Espagnol...) qui prennent les mêmes caractéristiques que pour les "catégories" (Langues, Comptabilité...) Une idée ? :/

D'ailleurs, ca va pas être un peu compliqué pour faire le fond du menu déroulant avec une ombre portée ?

Encore merci. :)

Tu peux voir ce que ca donne sur le même lien: http://tarkna.free.fr/menu
19/10/2011, 22h25
NoSmoking

trop d'erreurs de conception, des balises inexistantes </br>, je pense qu'il faut que tu reviennes à l'essentiel, les effets viendront après...

je te remets le lien http://css.developpez.com/galerie/?p...orizontaux#MH1 , attaches toi à la conception et au fonctionnement, le reste viendra plus facilement.
20/10/2011, 18h51
Tarkna

J'ai utilisé la balise <br /> pour sauter à la ligne. mais c'était surtout pour avoir un aperçu.

Sinon j'ai déjà regardé le menu que tu me proposes mais c'est pas vraiment ce que je recherche.
24/10/2011, 17h30
Tarkna

J'ai enfin pu me faire mon menu, cependant je bloc sur quelque chose (encore).
J'ai 2 marges en haut et en bas de 17px qui sortent de nul part.

Pourrais-tu jeter un coup d'oeil ? Impossible de trouver d'ou ca vient... :/

http://tarkna.free.fr/menu/

Merci. :)
24/10/2011, 18h19
NoSmoking

il faut bien penser à mettre les valeurs par défaut des éléments des listes à zéro, par exemple le margin pour le UL.
25/10/2011, 21h50
Tarkna

En effet, ca a bien marché sur #menu ;)

Par contre j'ai un autre soucis lorsque j'ai placé mon bloque central ou j'aurais le contenu du site.

Au début le menu déroulant passé sous la div donc j'ai ajouté "z-index" afin qu'il soit au dessus mais le problème si qu'il ne reconnait pas les liens. :/

http://tarkna.free.fr/menu/

As-tu une idée à ceci ?