Discussion: Menu flex avec IE

  1. #1
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut Menu flex avec IE

    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 ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  2. #2
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    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...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  3. #3
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    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...)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 420
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 420
    Points : 20 803
    Points
    20 803

    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-
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    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...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 420
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 420
    Points : 20 803
    Points
    20 803

    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;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut

    Je mets un certain temps à répondre car je suis tombé sur un autre problème et j'ai cherché avant de répondre, mais je n'ai pas trouvé et ne suis pas en mesure de poser une question (en gros, c'est trop complexe pour poser une question claire).
    Mais ta solution fonctionne ! (Ma version est la 11). Peux-tu m'expliquer pourquoi ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 420
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 420
    Points : 20 803
    Points
    20 803

    Par défaut

    Lis la doc.

    "css display"
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut

    Dans ton lien (au départ, pas vu qu'il y en avait un ; juste compris "cherche"...), j'ai lu ça
    L'élément génère une boîte pour un élément en bloc qui « s'écoule » dans le contenu environnant comme s'il était une boîte en ligne (le comportement obtenu est similaire à celui d'un élément remplacé).
    Pas compris ce qu'était un élément remplacé mais assez passé de temps sur ce sujet.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 953
    Points : 25 544
    Points
    25 544

    Par défaut

    Bonjour,

    concernant l'utilisation de flex-box pour réaliser un menu et pour faire court, je dirais que si celui-ci est à un seul niveau il peut être intéressant effectivement d'utiliser les flex-box pour passer d'un affichage ligne -> colonne suivant la largeur d'affichage, ou encore de changer l'ordre des menus, mais si il s'agit de construire un menu à plusieurs niveaux, je n'en vois pas à priori l'intérêt par rapport à une présentation CSS classique qui à fait ses preuves depuis bien longtemps.

    je souhaite utiliser un menu...
    depuis le temps que tu nous parles de menu sur ce forum, plusieurs années, il me semblait que tu aurais réussi à pérenniser une structure et le CSS associé pour ne pas avoir à réinventer la roue à chaque fois, je me rencontre que non !

    Pas compris ce qu'était un élément remplacé mais assez passé de temps sur ce sujet.
    tu devrais aller faire un tour sur cette page : Qu'est-ce qu'un élément remplacé ? et la lire.

  11. #11
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut

    Tu as l'air pas d'accord avec jreaux62 vu que son menu utilise les flex boxes et est multi-niveaux...

    il me semblait que tu aurais réussi à pérenniser une structure et le CSS associé pour ne pas avoir à réinventer la roue à chaque fois, je me rencontre que non
    Je pensais aussi ne plus avoir à travailler sur ce sujet mais suis tombé sur une insatisfaction...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 953
    Points : 25 544
    Points
    25 544

    Par défaut Pour faire un peu moins court donc...

    Tu as l'air pas d'accord avec jreaux62 ...
    Là tu tires une conclusion hâtive, flex-box apporte son lot de solution rapide de mise en forme comme je l'ai indiqué mais concernant ce menu il existe, pour le même rendu, le modèle de position table.

    Attention je ne parle pas de l'élément HTML <table> mais du modèle de rendu display: table-xxx qui est reconnu, unanimement, depuis IE8 soit près de 10 ans.

    Le même rendu est obtenu simplement avec le CSS minimaliste suivant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #menu li {
      display: table-cell;
      width: 1%;
    }
    c'est tout rien de plus si ce n'est que la width force la même largeur un peu comme le fait flex-grow.

    Exemple simple :
    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
    <!DOCTYPE HTML>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Menu avec table-cell</title>
    <meta name="Author" content="NoSmoking">
    <style>
    #menu {
      position: relative;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    #menu li {
      display: table-cell;
      width: 1%;
    }
    #menu li +li {
      border-left: 1px solid #abc;
    }
    #menu a {
      display: block;
      text-align: center;
      line-height: 2em;
    }
    #menu li:hover {
      background: #cde;
    }
    </style>
    </head>
    <body>
      <h1>Menu avec <code>display:table-cell</code></h1>
      <ul id="menu">
        <li><a href="#">Menu #1</a></li>
        <li><a href="#">Menu #2</a></li>
        <li><a href="#">Menu #3</a></li>
        <li><a href="#">Menu #4</a></li>
      </ul>
    </body>
    </html>

  13. #13
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 420
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 420
    Points : 20 803
    Points
    20 803

    Par défaut

    Je suis d'accord avec NoSmoking

    Et en effet, j'utilise flex, car ce même menu sert AUSSI sur smartphone, où je le passe alors en vertical (via les media queries) !
    ex. :



    Comme je t'ai dit :
    • à toi de te faire ta propre opinion,
    • de TESTER différentes solutions,
    • et d'adapter en fonction de chaque cas particulier.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  14. #14
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut

    Ouh là, ça, c'est pas du code de ****** !

    Les smartphones ne faisant pas partie de ma cible, je pense plutôt m'investir sur le code simpliste de No Smoking (je savais que la mise en page n'utilise plus les balises html <table> depuis une dizaine d'années). Cela dit, difficulté pour y ajouter des sous-menus (qui n'apparaîtraient qu'au survol (hover) et non sur click comme dans tes exemples).
    Voici le code modifié sauf que le sous-menu n'apparaît pas au survol : pourquoi ? (contrairement à ce que tu crois, même si je pêche parfois par feignantise, je préfère quand même comprendre (et donc apprendre))

    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
    <!DOCTYPE HTML>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Menu avec table-cell</title>
    <meta name="Author" content="LaurentSc">
    <style>
    #menu {
      position: relative;
      margin: 0;
      padding: 0;
      list-style-type: none;
     
    #menu li {
    list-style-type: none;
    }
    }
    #menu ul>li {
            display:none;
    }
    #menu ul >li:hover {
            display:block;
    } 
    #menu > li {
      display: table-cell;
      width: 1%;
    }
    #menu li +li {
      border-left: 1px solid #abc;
    }
    #menu a {
      display: block;
      text-align: center;
      line-height: 2em;
    }
    #menu li:hover {
      background: #cde;
    }
    </style>
    </head>
    <body>
      <h1>Menu avec <code>display:table-cell</code></h1>
      <ul id="menu">
        <li><a href="#">Menu #1</a>
    		<ul>
    			<li><a href="#">Menu #1.1</a></li>
    			<li><a href="#">Menu #1.2</a></li>
     
    		</ul>
    	</li>
        <li><a href="#">Menu #2</a></li>
        <li><a href="#">Menu #3</a></li>
        <li><a href="#">Menu #4</a></li>
      </ul>
    </body>
    </html>
    Selon moi #menu ul>li pointe sur les li enfants directs d'un ul enfant de menu...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  15. #15
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 420
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 420
    Points : 20 803
    Points
    20 803

    Par défaut

    Voici un menu sans jQuery - full CSS :


    display:flex ou display:table, c'est juste un CHOIX à faire. TON choix...

    N.B. Sans jQuery, , on doit ajouter dans le HTML :
    • 1- pour afficher les flèches* des menus avec sous-menus
    • 2- pour désactiver les liens* des menus avec sous-menus

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <li class="hasSub"><a href="javascript:void(0)">...
    *(ce que faisait automatiquement le script jQuery)

    N.B. On peut constater dans mon exemple qu'il ne faut pas dépasser 3 niveaux MAXIMUM !
    Sinon, ça devient fastidieux de naviguer :
    • on ne sait plus où placer les niveaux suivants !
    • ils deviennent difficiles à atteindre (trop de clics, et/ou difficiles à cliquer)

    Et c'est souvent signe d'une mauvaise conception.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  16. #16
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut

    Merci...mais c'est trop simple !

    Ca se comporte exactement comme je voudrais (même sûrement mieux car j'ai pas testé le côté responsive), mais je préfèrerais un code que je maîtrise, donc pourrais-tu me dire ce qui n'est pas bon dans mon code du post #14 ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  17. #17
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 420
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 420
    Points : 20 803
    Points
    20 803

    Par défaut

    Toi.


    SERIEUSEMENT...
    j'ai mis des commentaires dans le code CSS...

    ->
    • REPRENDS-LE depuis le début = SANS CSS du tout !
    • puis, ajoute CHAQUE instruction, UNE à la FOIS.
    • Et REGARDE CE QUI SE PASSE, étape par étape.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  18. #18
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut

    Pourrais-tu préciser ?

    je préfère quand même comprendre (et donc apprendre)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  19. #19
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut

    Citation Envoyé par laurentSc Voir le message
    Pourrais-tu préciser ?
    Quand j'ai écrit ça, je n'avais vu que le "toi" et pas la suite...Je vais essayer...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  20. #20
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 180
    Points : 2 613
    Points
    2 613
    Billets dans le blog
    1

    Par défaut

    Bon, j'ai un peu étudié ton code et j'ai quelques questions :

    1- toute la partie CSS avec les rotations :
    Code css : 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
        -o-transition: -o-transform 0.5s;
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -moz-transition: -moz-transform 0.5s;
        -webkit-transform: rotate(0deg);
        -webkit-transition: -webkit-transform 0.5s;
        transform: rotate(0deg);
        transition: transform 0.5s;
    }
    #navMain .hasSub.open:after {
        -o-transition: -o-transform 0.5s;
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -moz-transition: -moz-transform 0.5s;
        -webkit-transform: rotate(180deg);
        -webkit-transition: -webkit-transform 0.5s;
        transform: rotate(180deg);
        transition: transform 0.5s;
    }
    pas vu ce que ça faisait car si je l'enlève, je vois pas la différence...Ca fait quoi ?

    2- dans ce code CSS, la classe open (ligne 10) (si c'est bien une classe), c'est quoi ?

    3- y a un bug que j'ai pas réussi à corriger : si on affiche (en survolant) le menu 3.1, puis qu'on descend pour survoler 3.2, y a tout qui disparaît. C'est quoi la correction ?

    4- J'ai tenté de convertir le menu avec des desplay:table à la place de flex :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    /* DESKTOP : menu horizontal */
    @media screen and (min-width:1025px) {
    	#navMain > ul { display:table; }
    	#navMain > ul > li { display:table-cell; width:25%;}
    	#navMain > ul > li > ul { position:absolute; width:2100%;
    	z-index:1; }
    mon code est-il correct ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

Discussions similaires

  1. tableau extensible en php ou html
    Par haamdi dans le forum Scripts
    Réponses: 4
    Dernier message: 06/07/2012, 15h39
  2. PHP avec extension HTML
    Par jeffer dans le forum Débuter
    Réponses: 3
    Dernier message: 10/11/2009, 10h50
  3. Réponses: 1
    Dernier message: 21/08/2008, 11h47
  4. passer d'une page html vers PHP
    Par @min@ dans le forum Formulaires
    Réponses: 5
    Dernier message: 06/04/2007, 21h34
  5. Probleme pour passer de l'écriture html a php
    Par cyberdevelopment dans le forum Syntaxe
    Réponses: 2
    Dernier message: 18/08/2006, 18h24

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