Menu horizontal avec sous menu transition

[Tarkna]

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.



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



Je vous remercie.

[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!

[Tarkna]

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

Le code html:

Code html :

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 css :

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.

[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.

[Tarkna]

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.

[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

[Tarkna]

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.

[NoSmoking]

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 */
}

[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 css :

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;
}

[NoSmoking]

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;
}

[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

[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.

[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.

[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.

[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.

[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 ?