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 :

Expanding vertical menu en CSS/javascript


Sujet :

CSS

  1. #1
    Membre éclairé Avatar de rems033
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    513
    Détails du profil
    Informations personnelles :
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Mai 2007
    Messages : 513
    Par défaut Expanding vertical menu en CSS/javascript
    Juste un pti pb supplémentaire en rapport avec mon post sur le même sujet...
    J'ai donc un sous-menu contenu dans un <ul><li> qui parrait au survol sur le <li> parent et disparait en onmouseout (javascript)

    Pour un peu de style, j'ai voulu mettre un padding-top sur le <ul><li> du sous-menu mais voila...maintenant, c'est OK sous IE7, FF mais pas bon sous IE6
    Comme ce foutu IE6 detecte un espacement entre le menu parent et le sous-menu, du coup le onmouseout fait son effet et fait disparaitre fissa le sous-menu...

    Existe-t-il un moyen de palier à ce problème (Javascript/CSS ou autre que sais-je...)

  2. #2
    Membre éclairé Avatar de rems033
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    513
    Détails du profil
    Informations personnelles :
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Mai 2007
    Messages : 513
    Par défaut
    Alors du coup j'ai creusé un peu mes méninges pour trouver une solution un peu brutale mais qui fonctionne dans ce type de problèmes...

    J'ai créée 2 classes différentes applicables aux <li> du sous-menu :
    • Une classe ".spacer" avec un attribut height à 10px (hauteur de l'espacement désiré entre le menu et le sous-menu) ;
    • Une classe ".normal" avec les attributs normaux pour tout les autres ;
    Ce qui donne :
    CSS
    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
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
     
    #menu_nav {
        padding:0px;
        margin:0px;
    }
     
    #menu_nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
     
    #menu_nav ul li {
        padding-bottom:10px;
        height:auto;
        display:block;
        }
     
    #menu_nav {
        width: 240px;
        margin: 10px;
        }
     
    #menu_nav li a {
        text-decoration: none;
        font-size:14px;
        height:24px;
        padding-top:8px;
        padding-left:10px;
    }    
     
    #menu_nav li a:link, #menu_nav li a:visited {
        color: #4D4D4D;
        text-align:left;
        display: block;
        background:  url(../images/menu10.gif);
        }
     
    #menu_nav li a:hover {
        color: #FF9834;
        padding-right:10px;
        text-align:right;
        background:  url(../images/menu10_hover.gif);
        font-weight:bold;
    }
     
    #menu_nav ul li ul li.normal {
        padding-bottom:10px;
        height:26px;
        display:block;
    }
     
    #menu_nav li ul li a {
        text-decoration: none;
        font-size:11px;
        height:18px;
        padding-top:8px;
        padding-left:10px;
        overflow:hidden;
    }    
     
    #menu_nav li ul li a:link, #menu_nav li ul li a:visited {
        color: #4D4D4D;
        text-align:left;
        display: block;
        background:  url(../images/submenu10.gif);
        }
     
    #menu_nav li ul li a:hover {
        color:#990000 ;
        padding-right:10px;
        text-align:right;
        background:  url(../images/submenu10_hover.gif);
        font-weight:bold;
    }
     
     
    #menu_nav li a.current {
        padding-right:10px;
        text-align:right;
        background:  url(../images/menu10_hover.gif);
        font-weight:bold;
    }
     
    .submenu{
        display: block;
        height: 22px;
        margin-left: 46px;
        padding-left: 7px;
        overflow:hidden;
    }
     
    .hide{
        display: none;
    }
     
    .show{
        display: block;
    }
     
    li.spacer {
        height:10px;
        overflow:hidden;
    }
    HTML
    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
     
    <div id="menu_nav">
        <ul>
            <li><a href="index.php?cat=reglementation&mode=preambule">Accueil</a></li>
            <li onmouseover="showHide('sous_menu1')" onmouseout="showHide('sous_menu1')"><a href="index.php?cat=reglementation&mode=transport" class="current">Le Transport de personnes</a>
                <ul id="sous_menu1" class="hide">
                    <li class="spacer"></li>
                    <li class="normal"><a href="index.php?cat=reglementation&mode=petite_remise" class="submenu">La Petite Remise</a></li>
                    <li class="normal"><a href="index.php?cat=reglementation&mode=grande_remise" class="submenu">La Grande Remise</a></li>
                    <li class="normal"><a href="index.php?cat=reglementation&mode=taxi" class="submenu">Le Taxi</a></li>
                </ul>
            </li>
            <li onmouseover="showHide('sous_menu3')" onmouseout="showHide('sous_menu3')"><a href="index.php?cat=reglementation&mode=textes">Les Textes de R&eacute;f&eacute;rence</a>
                <ul id="sous_menu3" class="hide">
                    <li class="spacer"></li>
                    <li class="normal"><a href="index.php?cat=reglementation&mode=fondamentaux" class="submenu">Textes Fondamentaux</a></li>
                    <li class="normal"><a href="index.php?cat=reglementation&mode=organisation" class="submenu">Textes sur l'Organisation</a></li>
                    <li class="normal"><a href="index.php?cat=reglementation&mode=exploitation" class="submenu">Textes sur l'Exploitation</a></li>
                </ul>
            </li>
            <li onmouseover="showHide('sous_menu2')" onmouseout="showHide('sous_menu2')"><a href="index.php?cat=reglementation&mode=tarifs">Les Tarifs du Taxi</a>
                <ul id="sous_menu2" class="hide">
                    <li class="spacer"></li>
                    <li class="normal"><a href="index.php?cat=reglementation&mode=regles_tarifs" class="submenu">R&egrave;gles de Tarification</a></li>
                    <li class="normal"><a href="index.php?cat=reglementation&mode=recherche_tarifs" class="submenu">Recherche Tarifs</a></li>
                </ul>
            </li>
        </ul>
    </div>
    Je suis quand même ouvert à de nouvelles solutions "plus propre" si quelqu'un en a une ?
    Merci !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Génialissime : tree menu vertical interactif 100%css 0%javascript
    Par LadyWasky dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 09/08/2010, 13h02
  2. Expanding vertical menu en CSS/javascript
    Par rems033 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 07/11/2008, 09h31
  3. Menu en CSS, Javascript ou les 2 ?
    Par senacle dans le forum Mise en page CSS
    Réponses: 16
    Dernier message: 14/08/2008, 16h08
  4. Réponses: 10
    Dernier message: 19/05/2008, 14h46

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