Aller au menu - Aller au contenu

Créer un menu horizontal déroulant en CSS


Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page Précédente  1  2  3  4  5  6  Suivante
Pseudo Commentaire
Page Précédente  1  2  3  4  5  6  Suivante
Hors ligne kadossin # Posté le 27/03/2009 à 16:47:02

ce menu ne tient pas compte du bug de IE6 concernant les select qui se mets devant le menu.

est ce que vous avez une solution?
Hors ligne Chaoxys # Posté le 09/04/2009 à 00:37:06
Avatar

Très bon tuto même s'il faut s'arracher les cheveux pour l'adapter :p

Image utilisateur
 
Hors ligne fandejeux509 # Posté le 21/04/2009 à 20:00:45
Avatar

Super tuto, franchement il est génial. Bon, il faut bien sûr l'adapter, mais on ne va pas se plaindre! Je le cherchais depuis longtemps

On peut être bon tout en étant un zér0 :-° o_O
 
Hors ligne fifi08 # Posté le 29/04/2009 à 10:23:24
Avatar

Tout d'abord super tuto ! Mais j'ai une petite question j'ai créé un design extensible mais le soucis je ne sais pas comment faire pour rendre mon menu déroulant extensible. Est ce possible et avez-vous une solution ? :-°

Par avance merci !!! :)
Hors ligne belleva # Posté le 30/04/2009 à 18:54:27

bonjours,

Voila j'aurais voulu ajouter des sous-sous-menus.

Pour le HTML pas de soucis il suffis d'ajouter une partie ul et li, mais là ou je bloque c'est pour le css...
Et peut etre qu'il y a aussi quelque chose a rajouter pour le JS.

Quelqu'un peut m'aider??

Sinon tout le reste marche super même sous IE en rajoutant la ligne script pour IE6
Hors ligne belleva # Posté le 30/04/2009 à 21:48:32

c'est bon laissez tomber j'ai fini par trouver
Hors ligne belleva # Posté le 30/04/2009 à 21:51:26

finalement non parce que mon sous sous menu recouvre la barre horizontale .. je sais pas comment le faire dérouler vers le bas
Hors ligne elbarto1026 # Posté le 30/04/2009 à 22:36:52

Bonjour tout le monde !

Même souci que belleva, je n'arrive pas a ouvrir de sous sous menu :(

<ul id="menu">

<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li>
<a href="...">...</a>
<ul>
<li>
<a href="...">...</a>
<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>
</li>
<li><a href="...">...</a></li>
</ul>
</li>
<li><a href="...">...</a></li></b>

</ul>

A part si la partie HTML est fausse, il doit y avoir quelque chose a rajouter sur le css non ? :o
Hors ligne belleva # Posté le 30/04/2009 à 23:23:51

perso moi ça fait ouverture du sous menu et apres tout de suite tous les sous sous menus qui se suivent sans appartenir a aucun sous menu
Hors ligne belleva # Posté le 30/04/2009 à 23:27:26

pour le css j'ai rajouté ça

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
29
30
31
html>body #menu li ul li ul               
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li:hover ul ul ul, #menu li.sfhover ul ul ul/* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */



        margin    : -5px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
        background     : transparent url("main-header-left.gif") repeat;
 /* couleur de fond */       
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */

html>body #menu li ul ul ul               
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}


#menu li:hover ul ul ul, #menu li li:hover ul ul ul, #menu li.sfhover ul ul ul, #menu li li.sfhover ul ul ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}



Mais ça ne fais pas exactement ce que je veux donc d'ou vient le soucis?
Hors ligne Dj-Quentin # Posté le 02/05/2009 à 21:07:38

Salut,
Très bon tuto !
Mais j'ai un problème, le menu ne s'affiche pas horizontalement avec IE et Opéra.Pourtant j'ai copier le code.
Voila l'adresse ou il y 'a un problème : http://mus-radio.niloo.fr/index3_2.html
Cordialement
Quentin
Hors ligne ZlVlasTeR # Posté le 05/05/2009 à 03:49:45

Bonjour,

j'ai installé le menu et il fonctionne à la perfection, je vous remercie d'avoir fait ce tutoriel!

Mon seul inconvénient est que j'aimerais mettre toute le code, par exemple: <ul id="menu">

<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li>
<a href="...">...</a>
<ul>
<li>
<a href="...">...</a>
<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>
</li>
<li><a href="...">...</a></li>
</ul>
</li>
<li><a href="...">...</a></li></b>

</ul>


Dans le CSS et seulement à avoir a modifier le lien et nom de mes pages du CSS à place de le faire à toutes les pages différentes que je créer.. Car j'ai actuellement plus de 10 pages et lorsque je change un lien dans mon menu, le temps manque!.. Aurait-il une façon simple de seulement à avoir a entré les liens a une place et les changés s'il y a quelques choses..???

Merci de votre aide, vous êtes super!
Hors ligne ZlVlasTeR # Posté le 07/05/2009 à 19:32:05

Up svp, si quelqu'un sait?
Hors ligne PtiBonhomme # Posté le 12/05/2009 à 18:03:31

Merci Toinouz pour ce tuto :D , vraiment très bien expliqué et très ludique (grâce aux codes).
Pourtant je n'avais jamais touché au Javascript :p

Petite question concernant l'adapatation:
Voila comment se découpe mon menu déroulant -->
> J'accède au menu
*L'entreprise X
-Ses produits
-Son engagement
*Je rejoins la communauté
-Mes avantages
-Mes événements

Comment changer uniquement la couleur de > J'accède au menu ?

J'ai essayé de créer une nouvelle id/class, en dehors et dans l'id=menu, mais rien à faire, cela ne fonctionne pas :colere2:

Could you help ? Merci beaucoup ;)
Hors ligne Toinouz # Posté le 12/05/2009 à 19:19:47
Plop ...
Avatar

Ville : Les villards sur thônes
Pays : France métropolitaine
études : ESISAR

Bonjour,

Je ne dispose toujours pas de suffisamment de temps pour vous répondre, je m'excuse pour tous vos mails, vos commentaires, et vos mps sans réponses. :(

Merci de comprendre.

Ps : Pour changer la couleur d'un seul lien du menu, rien de plus simple rajoute une class et un petit bout de code au fond de ton fichier CSS. Exemple :


Code : HTML
1
2
3
4
5
6
7
8
9
<ul id="menu">

        <li>
                <a href="#" class="special">accueil</a>
        </li>
        
        [...]
        
</ul>



Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
#nav a.special		
{
	color		: #XXXXXX ;
	background	: #XXXXXX ;
}

#nav a.special:hover
{
	color		: #XXXXXX ;
	background	: #XXXXXX ;
}

Image utilisateur

 
Hors ligne Furinkazan # Posté le 17/05/2009 à 19:57:31
Avatar

Ville : Mérignac
Pays : France métropolitaine

Pour ceux que ca interesse, voila ce qu'il faut modifier pour que le menu soit extensible.
(Testé avec Firefox 3.0.10). Pour IE, il faudra modifier en conséquence, notemment les
border. Le paramètre width: 19%; dépend du nombre de menu.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#menu a /* Contenu des listes */
{
        display : block;
        padding : 0;
        background :       
        color : #fff;
        text-decoration :

}

#menu li    
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; 
width: 19%;
height:21px; /* Pour éviter que les ss-menus ne s'ouvrent lors d'un rollover */
}

#menu li ul
{ 
        position: relative; /* Position relative */

        left: -999em;
width:100%;
}

#menu li ul li
{
      /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
      border-top : 1px solid #fff;
width:100%;
}

#menu li ul ul 
{
position:absolute;
margin    : -22px 0 0 100% ;
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; 
width:100%;
}
Hors ligne ioks # Posté le 18/05/2009 à 15:42:03

J'ai un soucis avec IE et l'integration FLASH en dessous

Pour resoudre le probleme de de priorité flash -html, j'ai integré monf SWF avec la commande transparent
Code : HTML
1
2
3
<object type="application/x-shockwave-flash" data="http://www.francebureau.com/diaporama/img/fichierdetravail/www/bureau-stock_nouveaute/1.swf" width="829px" height="306px">
    <param name="WMODE" value="transparent" />
</object>


Sa mrche sous FF mais pas sous IE

Merci a toute personne susceptible de m'aider :)
Hors ligne matmar08120 # Posté le 20/05/2009 à 10:46:06


Bonjour à tous les membres du zéro,


Merci a Toinouz pour ce tutoriel.
Sympa d'obtenir un menu deroulant avec du XHTMl et CSS.
Merci,j'ai donc pu l'adapter à mon projet.
Je remercie également Furinkazan pour son explication sur l'adaptation face à un design extensible. J'ai pu ainsi obtenir le menu voulu dans toutes les résolutions. MErci encore une fois à vous en tout cas et bonne continuation....
vive le site du zéro.
Hors ligne HeatBurns # Posté le 04/06/2009 à 09:35:13
00010010001101000101
Avatar

Très bon tutoriel. Bien expliqué.

Image utilisateur
 
Hors ligne calimero65 # Posté le 15/06/2009 à 00:32:06

Bonjour,

Je viens d'installer le menu sur un site qui est en création et visible à cette adresse.

Avant toute chose je voudrais remercier les créateurs, le tuto est très clair, l'effet simple mais efficace... Que du bonheur pour les Zéros !!

J'ai paramétré le menu sans problème mais les liens ne fonctionnent pas.
Aurais-je raté quelque chose dans l'installation ?
J'ai écris les adresses complètes pour qu'il n'y ai pas d'erreur. Est-ce là le problème ?
Aurait-il mieux valu mettre un chemin avec les ../../ ?

exemple pour l'onglet GALERIE :
*/
<li>
<a href="#">GALERIE</a>
<ul>
<li><a href="http://www.paydetrie.fr/ecole_rugby/galerie/video.html">Vidéos</a></li>
<li><a href="http://www.paydetrie.fr/ecole_rugby/galerie/photo.html">Photos</a></li>
</ul>
</li>
*/
Tous les liens sont écris de la même manière.
Et quand je tape l'adresse complète des pages j'arrive bien où il faut. exemple
Si quelqu'un peut me renseigner... Je suis bloquée et sans le menu on ne peux pas faire tester le site...
Merci d'avance pour le temps que l'on voudra bien me consacrer.
Hors ligne omzen # Posté le 18/06/2009 à 10:23:18
Le Zen est un état d'esprit
Avatar

Bonjour à tous

tout d'abord, FELICITATIONS pour ce site auquel je me réfère souvent dans mon projet actuel de changement de site.

mon soucis > je ne parviens pas à rendre mon menu déroulant cohérent. quand le menu se déroule il est plus grand que l'onglet initial (parce que je voulais que le menu tienne entièrement sur la page) mais du coup tout est bancal... ce qui donne
LA OU CA COINCE
quelqu'un aurait une recette miracle ?
MERCI

Om zen en devenir...
:D
 
Hors ligne omzen # Posté le 18/06/2009 à 10:42:06
Le Zen est un état d'esprit
Avatar

ça y est j'ai trouvé, j'avais rajouté sans faire exprés des espaces entre les onglets.
sur dreamweaver, modifier weight 0px au cas où ça aiderait quelqu'un !
;-)

Om zen en devenir...
:D
 
Hors ligne omzen # Posté le 18/06/2009 à 10:44:02
Le Zen est un état d'esprit
Avatar

calimero

j'avais moi aussi le meme probleme de lien mais si tes pages sont dans le meme dossier les liens sont plus simples :
par exemple
<a href="photo.html">Photos</a></li>

c'est un peu long, et surtout si tu dois changer, change dès le début sinon bonjour les emmerdes ;)

Om zen en devenir...
:D
 
Hors ligne unciauncia # Posté le 20/06/2009 à 13:45:27

études : BTS IG Clermont-Ferrand

Salut à tous et bravo pour le tutoriel que j'ai trouvé excellent. Malgré tout j'ai encore un petit problème d'affichage sur tout les navigateur autres que IE et je n'arrive pas à cerner le problème... J'ai cherché dans les commentaires et sur le Forum mais je n'ai pas trouvé de réponse qui convenait.

Donc si une bonne âme pouvait jeter un petit œil sur mon code se serait bien gentil.

Voici l'adresse : www.bbca.fr
Hors ligne Vanimawen # Posté le 28/06/2009 à 10:49:58

Ce tuto extrêmement bien fait vaut mon inscription sur ce site pour dire un grand merci ! :D


@ Unciauncia.

J'ai regardé ton code rapidement. Tes sous-menus ne sont pas imbriqués dans les menus.
Je prends exemple avec un bout de ton code :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
...
<li><a>Club</a>   </li> <!-- la balise est fermée trop tôt -->
			<ul> 
				<li><a href="?page=construction">Présentation</a></li> 
				<li><a href="?page=construction">Historique</a></li> 
				<li><a href="?page=organigramme">Bureau</a></li> 
				<li><a href="?page=construction">Contact</a></li> 
				<li><a href="?page=construction">Entraînements</a></li>					
			</ul> 
<!-- Correction : il faut la fermer ici --> </li>
<li><a>Séniors</a></li> 
...


J'espère que cela t'aidera.
Hors ligne unciauncia # Posté le 30/06/2009 à 02:11:30

études : BTS IG Clermont-Ferrand

@Vanimawen
Merci beaucoup, effectivement avec la correction les menus sont bien plus performant et réalisent totalement ce que j' attendais d'eux ;)

Et encore merci au créateur du tutoriel !
Hors ligne gégédu16 # Posté le 03/07/2009 à 14:12:26

Ville : Bonneuil
Pays : France métropolitaine

Bonjour à tous
Félicitations pour ce tuto mais j'ai un problème avec IE8.
Quand je teste en local le menu fonctionne parfaitement mais dès que je suis sur Internet le menu bloque. Je suis hébergé chez free

Le dernier onglet archives devrait dérouler saison 2008-2009 puis encore en dessous equipe A, equipe B, 15 ans, 13 ans et benjamins.
le site est visible à l'adresse suivante :
site de Saint Sulpice

Par avance merci
 
Hors ligne gégédu16 # Posté le 03/07/2009 à 14:18:14

Ville : Bonneuil
Pays : France métropolitaine

Erreur pour le lien
c'est http://uassfootball.free.fr
autre précision, le menu fonctionne avec Mozilla et avec Opera
 
Hors ligne LordM # Posté le 06/07/2009 à 19:28:33

Super tutoriel :)
Merci bien :)
Hors ligne J-C Bubbendorf # Posté le 13/07/2009 à 12:41:08
La vie est un long flux RSS...
Avatar

Ville : Levallois-perret
Pays : France métropolitaine

Tu peut rajouter Opera au niveau de la comptabilité.

19/20

Image utilisateur |||||||||| 20%
N'oubliez pas la PONCTUATION !!! (ex. : points d'interrogations, points, virgules...)
Si votre sujet est résolu, penser à nous le faire savoir grâce au bouton Image utilisateur en bas de la page, merci.
Image utilisateur
 
Pour accéder à cette section
Connectez-vous !
connexion_rpx