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 multi-niveaux - flex


Sujet :

Positionnement en CSS avec flexbox

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut Menu multi-niveaux - flex
    Bonjour,

    je souhaite utiliser un menu qu'a proposé jreaux62.

    Mon souci est que mon site est en PHP, or son code fonctionne bien si l'extension est html mais le css n'est plus pris en compte, si je passe l'extension à php. Je teste le PHP avec Wampserver. (Dans ce code, pas de PHP du tout, mais comme je veux l'inclure dans des fichiers PHP, obligé de changer l'extension).

    Le code (que du html et du CSS) :
    Code html : 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
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8" />
         <title></title>
    	<style>
            * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* ----------- MENU ----------- */
    nav {
      position: relative;
    }
    nav ul {
      position: relative;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    nav li {
      position: relative;
    }
    nav a {
      position: relative;
      display: block;
    }
    /* ------ MENU niveau 1 ------ */
    nav > ul {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
    }
    nav > ul > li {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto; /* menus qui s'adaptent en largeur*/
      /*-webkit-flex:1 1 25%; flex:1 1 25%;*/ /* 4 menus de meme largeur*/
    }
    /* --- MENU niveaux suivants --- */
    nav > ul ul {
      position: absolute;
      width: 100%;
      top: 100%;
      z-index: 999;
      display: none; /* on masque */
      min-width: 120px;
    }
    /* ----------- hover ----------- */
    nav li:hover > ul {
      display: block; /* on affiche */
    }
    nav li:hover {
      background: grey;
    }
    nav li:hover > a {
      color: white;
    }
    /* ----------- DECORATION ----------- */
    nav li {
      background: #ccc;
    }
    nav li li {
      background: #bbb;
    }
    nav a {
      padding: 10px;
      text-decoration: none;
      color: #666;
      font-family: "Arial", sans-serif;
    }
    /* ----------- fleche ----------- */
    li.hasSub:before {
      position: absolute;
      content: "\25bc";
      color: #999;
      bottom: 5px;
      right: 5px;
    }
    li.hasSub:hover:before {
      color: #fff;
    }
    /* --- MENU niveau 2 et suivants --- */
    nav > ul ul {
      position: absolute;
      /*width: 100%;*/
      top: 100%; /* sous-menu DESSOUS */
      left:0;
      z-index: 999;
      display: none; /* on masque */
      min-width: 120px;
    }
    /* --- MENU niveaux 3 et suivants --- */
    nav > ul ul ul {
      position: absolute;
      width: 100%;
      top: 0;
      left:100%; /* sous-menu A DROITE */
    }
    nav > ul > li:last-child ul ul { /* dernier li du 1er ul */
      position: absolute;
      width: 20%;
      top: 0;
      left:-34%; /* sous-menu A GAUCHE */
    }
     
    /* ----------- fleche ----------- */
    li.hasSub:before {
      position: absolute;
      content: "\25bc";
      color: #999;
      bottom: 5px;
      right: 5px;
    }
    li.hasSub:hover:before {
      color: #fff;
    }
    nav > ul > li li.hasSub:before {
      content: "\25BA";
      bottom: 7px;
    }
    nav > ul > li:last-child li.hasSub:before {
      content: "\25C4";
      bottom: 7px;
    }
            </style>
    </head>
    <body>
    <nav id="menu">
      <ul>
        <li class="hasSub"><a href="javascript:void(0)">menu 1</a>
          <ul>
            <li class="hasSub"><a href="javascript:void(0)">menu 1.1</a><ul><li><a href="#">menu 1.1.1</a></li><li><a href="#">menu 1.1.2</a></li></ul></li>
            <li><a href="#">menu 1.2</a></li>
            <li><a href="#">menu 1.3</a></li>
            <li><a href="#">menu 1.4</a></li>
          </ul>
        </li>
        <li class="hasSub"><a href="javascript:void(0)">ceci est le menu 2</a>
          <ul>
            <li><a href="#">menu 2.1</a></li>
            <li class="hasSub"><a href="javascript:void(0)">menu 2.2</a><ul><li><a href="#">menu 2.2.1</a></li><li><a href="#">menu 2.2.2</a></li></ul>
              <li><a href="#">menu 2.2.3</a></li></ul</li>
            <li><a href="#">menu 2.3</a></li>
          </ul>
        </li>
        <li><a href="#">menu 3 sans sous-menu</a></li>
        <li class="hasSub"><a href="javascript:void(0)">enfin, voici un menu 4 un peu plus long</a>
          <ul>
            <li class="hasSub"><a href="javascript:void(0)">menu 4.1</a><ul><li><a href="#">menu 4.1.1</a></li><li><a href="#">menu 4.1.2</a></li></ul></li>
            <li><a href="#">menu 4.2</a></li>
          </ul>
        </li>
      </ul>
    </nav>
     
    <div>
     
        <p>bla bla 1</p>
     
        <p>bla bla 2</p>
    </div>
     
    </body>
    </html>
    Que faire pour que ça fonctionne ?

  2. #2
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    Je me demande bien pourquoi n'ayant rien changé (et je suis en local donc on ne peut pas incriminer le serveur), mais le problème a disparu...

  3. #3
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    C'est plus compliqué car ça marche bien avec Firefox mais incomplètement avec IE (certaines proprétés CSS comme le hover sont bien prises en compte, mais le menu de niveau 1 s'affiche en colonne et non en ligne...)

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour Laurent,

    Ton PREMIER REFLEXE doit être de FAIRE UNE RECHERCHE, et LIRE LA DOC !!

    PAS d'ouvrir une discussion pour un oui, pour un non.


    Pour IE (<=10), il faut préfixer avec -ms-
    Dernière modification par Invité ; 04/11/2017 à 09h43.

  5. #5
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    Bonjour,
    je reconnais que j'ai pas eu le bon réflexe. Je viens néanmoins de rajouter le préfixe -ms- pour assurer la compatibilité :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    /* ------ MENU niveau 1 ------ */
    nav > ul {
      display: -webkit-flex;
      display: -ms-flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
    }
    nav > ul > li {
      -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto; /* menus qui s'adaptent en largeur*/
      /*-webkit-flex:1 1 25%; flex:1 1 25%;*/ /* 4 menus de meme largeur*/
    }
    et le problème reste (même après avoir vidé le cache) donc je pense que cette fois, la discussion est justifiée...

  6. #6
    Invité
    Invité(e)
    Par défaut
    Alors pour IE (quelle version ??), ajoute :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    nav > ul > li {
    display:inline-block;
    }

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

Discussions similaires

  1. tableau extensible en php ou html
    Par haamdi dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 4
    Dernier message: 06/07/2012, 14h39
  2. PHP avec extension HTML
    Par jeffer dans le forum Langage
    Réponses: 3
    Dernier message: 10/11/2009, 09h50
  3. [PHPEdit] Déboguer un fichier avec l'extension html et contenant du PHP
    Par Claude_Azoulai dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 1
    Dernier message: 21/08/2008, 10h47
  4. passer d'une page html vers PHP
    Par @min@ dans le forum Langage
    Réponses: 5
    Dernier message: 06/04/2007, 20h34
  5. Probleme pour passer de l'écriture html a php
    Par cyberdevelopment dans le forum Langage
    Réponses: 2
    Dernier message: 18/08/2006, 17h24

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