IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

menu déroulant en css


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Février 2006
    Messages
    107
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 107
    Par défaut menu déroulant en css
    bonjour,
    Voilà, je souhaite réaliser un menu déroulant. Sui te une recherche sur internet j'ai trouver .Il permet de réaliser un menu déroulant en css sans utiliser du javascript.
    En tant que novice je me suis dit:"super", seulement j'ai suivi les instructions mais il ne fontionne pas sous IE (mais ss firefox oui).
    Une idée?
    merci

    voilà mon code:
    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
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
     
    <html>
    <head>
    	<title>Sommaire</title>
    <style type="text/css">
     
    body {behavior: url(csshover.htc);}
    div#menu {width: 100px;}
     
    /* fond blanc pour le menu */ 
    div#menu a {color:#000000}
    div#menu ul {padding: 0; width: 100px; border:1px solid; margin:0px; background: white}
     
    /* fond different au survol de la souris pour les sous menu et les "basiques"*/ 
    div#menu li:hover {background: #EDD}
    div#menu li.sousmenu:hover {background: #EBB;}
     
    /* Rajout d'une petite fleche pour les sous menu */ 
    div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}
     
    div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
    div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}
     
    /* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */ 
    div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #BBB; width:84px}
    div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
    div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
     
    /* la bordure de chaque hauteur a une couleure de survol*/ 
    div#menu li a:hover {border-left-color: red;}
    div#menu ul ul li a:hover {border-left-color: #00FF00;}
    div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
     
     
    </style>
    </head>
    <body>
    	<div id="menu">
    		<ul class="niveau1">
    			<li class="sousmenu"><a href="step1">Step 1</a>
    				<ul class="niveau2">
    					<li class="sousmenu"><a href="step2">Step 2</a>
    						<ul class="niveau3">
    							<li><a href="step3">Step 3</a></li>
    							<li><a href="step4">Step 4</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li class="sousmenu"><a href="step5">Step 5</a>
    				<ul class="niveau2">
    					<li><a href="step6">Step 6</a></li>
    					<li><a href="step7">Step 7</a></li>
    					<li><a href="step8">Step 8</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    </body>
    </html>

  2. #2
    Membre éclairé Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Par défaut
    Un collègue avait eu le même problême, il me semble ... Il s'était arrangé en utilisant des classes plutot que des id ... Mais si tu est novise je c'est pas si sa te parle bcp ...

  3. #3
    Membre confirmé
    Inscrit en
    Février 2006
    Messages
    107
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 107
    Par défaut
    ça me parle un peu.
    Je ne sais pas trop la différence mais je peux me renseigner.
    Ce serait le problème alors?

  4. #4
    Membre éclairé Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Par défaut
    C'est possible, je ne suis pas sur a 100% mais je te dit un collègue utilisé des id et IE ne les rekonésé pas ... Il à ensuite utilisé des classe et tout marcher très bien ...

    Mais peut être quelqu'un d'autres trouvera une autre solution ...

    Tu peut toujours tester la mienne, et si ta besoin d'aide hésite pas ...

    Pour commencer :
    - un id est unique
    -une classe peut représenter différent éléments

    Dans ton CSS tu sélectionne ton id avec #, les classes c'est avec un point.

    Ex :
    html
    <div class=pouet ...
    css
    .pouet{.....}

    Voila, bon courage !



  5. #5
    Membre confirmé
    Inscrit en
    Février 2006
    Messages
    107
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 107
    Par défaut
    Ok, alors j'ai peux être un truc bête mais j'ai remplacé mes: " div#menu " par des " div.menu " et j'ai défini menu comme une class. Du coup je n'ai plus de id. Mais ça ne fonctionne pas du moins ça n'a rien changé parce que ça fonctionne sur firefox.
    Une autre idée :

  6. #6
    Membre éclairé Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Par défaut
    Ah, mince ... dsl de t'avoir dit une connerie ...
    Pour ma part je n'ai pas d'autres idées ... Je vais cheté un coup d'oeil - rapide à ton code ....

    Sinon un lien très utile pour les menu comme tu souhaite :

    http://css.maxdesign.com.au/listamatic/

  7. #7
    Membre confirmé
    Inscrit en
    Février 2006
    Messages
    107
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 107
    Par défaut
    Ok , je te remercie.J'attends ta réponse je bouge pas

  8. #8
    Invité
    Invité(e)
    Par défaut
    Salut, j'ai eu le même problème avec ce code, car je crois le reconnaître, enfin bref, moi j'ai pas réussi à régler le problème, donc j'en ai utilisé un autre...
    Mais le menu ne se déroulant tout simplement pas, ce serait pas du à la propriété hover, qui fonctionne sous firefox, et pas sous IE ?
    Dernière modification par Marc Lussac ; 10/11/2006 à 00h42.

  9. #9
    Membre éclairé Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Par défaut
    Je ne pense pas que sa vienne de la, car même sous IE les hover, sur un texte par exemple marche très bien ...

  10. #10
    Membre confirmé
    Inscrit en
    Février 2006
    Messages
    107
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 107
    Par défaut
    J'ai mis l'adresse du site au début de ce sujet, c'est bien tuto.fr. Ce menu déroulant doit pouvoir fonctionner sur IE puisque le créateur du tutoriel lance un aperçu sous IE, mais va savoir pourquoi ça fonctionne sous firefox et pas sous IE. C'est pénible

  11. #11
    Membre confirmé
    Inscrit en
    Février 2006
    Messages
    107
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 107
    Par défaut
    Personne n'a une idée pour résoudre mon problème ou pour le contourner? SVP.

  12. #12
    Membre éclairé Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Par défaut
    J'ai pas encor regardé ton code, trop de boulot à coté ... Dans un premier temps tu peut choisir un autre menu ... Yen a qui doivent resembler au tient .... Regarde le lien que je t'ai filé + haut ...

  13. #13
    Membre chevronné
    Profil pro
    Étudiant
    Inscrit en
    Décembre 2005
    Messages
    273
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2005
    Messages : 273
    Par défaut
    IE ne prend les :hover que avec un lien
    donc met dans ton menu:

    <li><a href="">blabla</a></li>

    ensuite la déiffrénce entre class et id:
    *_ un ID doit etre unique dans la page (donc si tu as un seul menu, id="menu" était correct.
    *_ une class peut être affecté à plusieurs éléments de la page et c'est là son interet.

  14. #14
    Membre confirmé
    Inscrit en
    Février 2006
    Messages
    107
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 107
    Par défaut
    En fait je ne vois pas trop.
    Tu me dis de placer dans mon menu:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <li><a href="">blabla</a></li>
    C'est ce que j'ai fait. J'ai créé des liens.
    Là je saisis pas ce que tu me demandes de faire.
    Sinon pour ce qui est de la différence entre class et div, j'ai compris.
    Merci.

  15. #15
    Membre éclairé Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Par défaut
    En fait, apparemment IE ne comprend le hover que si ce dernier est appliqué sur un lien ... D'ou le <a href='' ''>blabla</a> En fait tu cré un lien qui mène nul part ... C'est juste pour faire marcher le hover ...

  16. #16
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    te casse pas avec ce genre de tracasserie ... va faire un tour sur opencube et regarde navstudio ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  17. #17
    Rédacteur

    Avatar de Yogui
    Homme Profil pro
    Directeur technique
    Inscrit en
    Février 2004
    Messages
    13 721
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yonne (Bourgogne)

    Informations professionnelles :
    Activité : Directeur technique

    Informations forums :
    Inscription : Février 2004
    Messages : 13 721
    Par défaut


    C'est parfait, merci bien
    Mais ça ne me dit pas pourquoi mon bazar ne fonctionne pas :/

  18. #18
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 9
    Par défaut
    Le problème c'est que "machin:hover" suivi de quelque chose ne fonctionne pas sur IE. Il faut passer par la case javascript pour ce que tu veux faire.

  19. #19
    Membre confirmé
    Inscrit en
    Février 2006
    Messages
    107
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 107
    Par défaut
    Le problème c'est que "machin:hover" suivi de quelque chose ne fonctionne pas sur IE. Il faut passer par la case javascript pour ce que tu veux faire.
    Peux tu me donner un exemple, stp?

  20. #20
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    Septembre 2003
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2003
    Messages : 3
    Par défaut
    Regarde cette page:

    http://www.uhb.fr/langues/craie/cfttr/ff/cfttr.html

    Observe le menu sous Firefox, puis regarde ce qui se passe sous internet explorer. Pour qu'un menu de ce type fonctionne sous ie, pas d'autre choix, c'est du javascript.

    L'attribut "hover" ne fonctionne que pour la balise <a> sous ie si je ne me trompe.

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Menu déroulant full CSS
    Par rems033 dans le forum Mise en page CSS
    Réponses: 12
    Dernier message: 20/12/2007, 10h37
  2. Pb avec Internet Explorer pour les menu déroulant en css
    Par gaet_045 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/06/2007, 08h31
  3. menu déroulant horizontal css
    Par dedel53 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 23/01/2007, 18h33
  4. Menu déroulant avec CSS
    Par fadex dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 20/11/2006, 14h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo