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 :

Dimensionner un container avec une valeur calculée et cacher un sous menu


Sujet :

Dimensionnement en CSS

  1. #1
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    3 083
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 3 083
    Points : 927
    Points
    927
    Par défaut Dimensionner un container avec une valeur calculée et cacher un sous menu
    Bonjour,

    J'essaye de faire un menu avec des sous menu en utilisant le moins possible du jQuery.

    Après plusieurs tentatives, je revois ma manière de faire en plus simple

    Contexte
    Je veux utiliser les flexbox pour cela. J'ai donc fait un menu avec des sous-menus à plusieurs niveaux
    Il a deux nav, un pour le menu et un nav pour le hamburger qui est pour le moment pas caché

    Voici la structure de base:

    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
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    <section class="e-panel">
                <nav id="menu" class="e-panel-row" aria-label="Main navigation">
     
                    <ul class="e-justify-content-space-beween bg-black">
     
                        <li class="hasChildren">
                            <div>
                                <a href="#">A propo</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
     
                            <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">Nous</a>
                                    </div>
                                </li>
                                <li class="hasChildren">
     
                                    <div>
                                        <a href="#">Histoire</a>
                                        <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                            <i class="fa fa-angle-down"></i>
                                        </a>
                                    </div>
     
                                    <ul class="sub-menu" role="group">
                                        <li>
                                            <div>
                                                <a href="#">Création</a>
                                            </div>
                                        </li>
     
                                        <li class="hasChildren">
                                            <div>
                                                <a href="#">Nos investisseurs</a>
                                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                                    <i class="fa fa-angle-down"></i>
                                                </a>
                                            </div>
                                            <ul class="sub-menu">
                                                <li>
                                                    <div>
                                                        <a href="#">Entreprise SA</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div>
                                                        <a href="#">Association</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div>
                                                        <a href="#">Fundation</a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <div>
                                                <a href="#">Développement</a>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <div>
                                    <a href="#">Situation</a>
                                    </div>
                                </li>
                            </ul>
                        </li>    
     
                        <li class="hasChildren">
                            <div>
                                <a href="#">Team</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
                            <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">Direction</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Secrétaires</a>
                                        </div>
                                    </li>
                                <li>
                                    <div>
                                        <a href="#">Collaborateurs</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Partenaires</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
     
                        <li class="hasChildren">
                            <div>
                                <a href="#">Contact</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
     
                            <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">Adresse</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Téléphone</a>
                                        </div>
                                    </li>
                                <li>
                                    <div>
                                        <a href="#">e-mail</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
     
                          <li>
                            <div>
                                <a href="#">New item 1</a>
                            </div>
                        </li>
                         <li>
                            <div>
                                <a href="#">New item 2</a>
                            </div>
                        </li>
                          <li>
                            <div>
                                <a href="#">New item 3</a>
                            </div>
                        </li>
     
                        <li>
                            <div>
                                <a href="#">Contact</a>
                            </div>
                        </li>
     
                        <li class="hasChildren">
                            <div>
                                <a href="#">Nous cours</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
                             <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">CSS Flex</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Boostrap</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Django</a>
                                        </div>
                                    </li>
                                <li>
                                    <div>
                                        <a href="#">React</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">jQuery</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <nav id="hamburger" class="e-panel-row bg-black">
                     <ul>
                        <li class="hamburger hasChildren">
                            <div>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
                                    <span class="fa fa-navicon"></span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </nav>
     
            </section>

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <section class="e-panel">
    est le container des deux nav


    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <nav id="menu" class="e-panel-row" aria-label="Main navigation">
    Permet de dire si le menu est horizontale ou verticale (vertical, ça sera pour plus tard

    Voici le code flex qui me permet de structure mes éléments flex
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    section.e-panel, section.e-panel{
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    }
    section.e-panel nav#menu{
    	flex: 1 1 auto;
    }
    section.e-panel nav#hamburger{
    	flex: 0 0 40px;
    }


    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul class="e-justify-content-space-beween bg-black">
    est le container de menu qui me cause problème.

    Voici le code CSS qui me permet de définir mes éléments flex

    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
    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
    /* First level */
    nav.e-panel-row ul{
     
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: row;
    	justify-content: space-between;
    	margin: 0 auto;
    	list-style: none;
    	box-sizing: border-box;
    	padding: 0px;
    }
     
    nav.e-panel-row ul li{
    	font-size: 1em;
    	position: relative;
    	flex: 1 0 auto;
    	text-align: center;
    	box-sizing: border-box;
    }
     
    nav.e-panel-row ul li a{
    	border: solid 0px yellow !important;
    }
     
    nav.e-panel-row ul li div{
    	padding: 10px;
    }
     
    /* hasChildren */
     
     
    nav.e-panel-row  ul li.hasChildren ul.sub-menu{
    	display: none;
    	position: absolute;
    	z-index: 1000;
    	background-color: #666;
    	width: 100%;
     
    }
    nav.e-panel-row ul li.hasChildren ul.sub-menu.toggled-on{
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: column;
    	box-sizing: border-box;
    }
     
    nav.e-panel-row  ul li.hasChildren ul.sub-menu.toggled-on li{
    	flex: 1 1 auto;
     
    }
    nav.e-panel-row  ul li.hasChildren ul.sub-menu.toggled-on li.hasChildren ul.sub-menu{
    	position: relative;
     
    }

    Problématique
    Si vous essayé le menu dans l'état actuel
    https://www.eco-sensors.ch/temp/e-panel/, en diminuant le navigateur, vous avez

    1. le hamburger qui apparait
    2. les éléments du menu qui passe en ligne 2, au fure et à mesure que la navigateur diminue, et ceci grâce au flexbox

    Jusqu'à la, tout est bon

    Mon objectif est que les éléments qui passent en ligne 2, n'apparaisse pas et que le container. Puis en cliquant sur le hamburger, les éléments de la deuxièmes lignes apparaissent, là ou les flex les a positionné, soit sur la deuxième ligne, avec un petit effet, gende fadeOut/fadeIn. Pour cela, ca se fera avec du jQuery.

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <nav id="menu" class="e-panel-row" aria-label="Main navigation">

    ou plus tôt le container direct
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul class="e-justify-content-space-beween bg-black">

    Étant donnée que la taille des caractères peut variés en fonction d'un navigateur ou d'un écran, je ne veux pas utiliser des hauteurs fixes.

    Voici ce que j'ai essayé de faire. Pour l'essai, j'ai utiliser une hauteur fix et un hoverflow

    Sur le container principal, j'ai défini une hauteur impliquent les deux nav.
    J'ai ajouté un overflow pour caché ce qui dépasse, soit la deuxième ligne
    Je l'ai caché à moitié volontairement pour mon explication.

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    div.e-panel, section.e-panel {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 60px;
      overflow: hidden;
    }

    Nom : Screenshot 2022-09-15 at 14.00.23.png
Affichages : 124
Taille : 205,3 Ko

    Mes questions

    • Est-ce qu'en CSS, je peux calculer la hauteur du container principale en fonction des hauteurs des li, sans passer par du javascript? calc(), ne peut pas aider?
    • Est-ce qu'en CSS, je peux caché des éléments du deuxième niveaux, de manière à ce que la hauteur des containers ne se modifie pas. En jQuery, je peux ajouter une class à ces éléments, si la position top ($('meselements').position().top), n'est pas la même que le tout premier li du menu?
    • Est-ce qu'en flex box, je peux "déclancher" un événement lorsque que les éléments flex passent sur la deuxième ligne?


    Le problème que j'ai rencontré avec jQuery, est que lorsque je cache en élément de la deuxième ligne, son offset.top est 0, donc en dessus du premier élément li de mon menu

    C'est pourquoi, je me penche sur une solution de hauteur du container principal avec un overflow, mais je ne sais pas si c'est la solution optimal.
    Et vu que je privilège le CSS/Flexbox avant l'usage du jQuery, je me retourne vers vous.

    Merci pour vos lumières
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  2. #2
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    3 083
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 3 083
    Points : 927
    Points
    927
    Par défaut
    Par exemple, je viens de voir un truc du genre
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var(--bs-body-line-height)

    Ou se défini bs-body-line-height? En haut du fichier css? Mais en fait ceci permet juste d'avoir une variable que je peux utiliser à différent endroit, n'est-ce pas?
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  3. #3
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 340
    Points : 41 987
    Points
    41 987
    Par défaut
    Bonjour,
    J'essaye de faire un menu avec des sous menu en utilisant le moins possible du jQuery.
    Pourquoi tant de haine, si il fait bien le job !!!


    Après plusieurs tentatives, je revois ma manière de faire en plus simple
    Cela à un rapport avec ton autre discussion : Peut-on calculer une largeur et déplacer un li dans un autre ul, dans ce cas il serait également bon de la suivre ne serait-ce qu'en respect des intervenants.


    Est-ce qu'en CSS, je peux calculer la hauteur du container principale en fonction des hauteurs des li, sans passer par du javascript? calc(), ne peut pas aider?
    Non le CSS à en charge la présentation et non le dynamisme, même si l'on peut utiliser l'un avec l'autre pour obtenir des effets.


    Est-ce qu'en CSS, je peux caché des éléments du deuxième niveaux, de manière à ce que la hauteur des containers ne se modifie pas. En jQuery, je peux ajouter une class à ces éléments, si la position top ($('meselements').position().top), n'est pas la même que le tout premier li du menu?
    Pas sûr de tout bien comprendre si ce n'est que au niveau de l’ergonomie/accessibilité j'ai l'impression que tu vas droit dans le mur.


    Est-ce qu'en flex box, je peux "déclancher" un événement lorsque que les éléments flex passent sur la deuxième ligne?
    flex-box, c'est un « modèle de présentation » CSS et il n'interagit pas avec le JavaScript mais tu peux utiliser ce dernier pour observer ces changements.


    Mon objectif est que les éléments qui passent en ligne 2, n'apparaisse pas et que le container. Puis en cliquant sur le hamburger, les éléments de la deuxièmes lignes apparaissent, là ou les flex les a positionné, soit sur la deuxième ligne, avec un petit effet, gende fadeOut/fadeIn. Pour cela, ca se fera avec du jQuery.
    Tu ne vas échapper à l'utilisation du JavaScript, mais sépare les problème, positionnement et effet.

    Une solution pure CSS serait envisageable en dupliquant ton menu principal et en affichant masquant les éléments en fonction de la largeur de l'écran via les medias-queries, mais cela ne sera pas forcément plus souple à mettre en oeuvre.


    Ou se défini bs-body-line-height? En haut du fichier css? Mais en fait ceci permet juste d'avoir une variable que je peux utiliser à différent endroit, n'est-ce pas?
    Ce sont des variables CSS qui peuvent simplifier la maintenance mais qui sont également modifiable par script.



    C'est pourquoi, je me penche sur une solution de hauteur du container principal avec un overflow, mais je ne sais pas si c'est la solution optimal.
    Et vu que je privilège le CSS/Flexbox avant l'usage du jQuery, je me retourne vers vous.
    Et as-tu pensé à une autre présentation ?

  4. #4
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    3 083
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 3 083
    Points : 927
    Points
    927
    Par défaut
    Bonjour NoSmooking,

    Tout d'abord

    Cela à un rapport avec ton autre discussion : Peut-on calculer une largeur et déplacer un li dans un autre ul, dans ce cas il serait également bon de la suivre ne serait-ce qu'en respect des intervenants.
    Je m'excuse pour cela. Quand le sujet a été déplacé, le lien qui me menait à ce dernier, m'envoyait sur une page morte et je ne retoruvais pas ce message.
    J'aurais du vérifier avant de poser ce message.

    J'avais pensé à utiliser des @media, mais ca ne va pas le faire, car le texte d'un menu peu être long et dans ce cas, dans le cas des écrans des smartphone, ce n'est deux éléments qui passe dessous, mais 3 ou 4.

    L'idée est de mesurer la largeur du menu et de le comparer avec la largeur du conteneur. Mais en felx, si on utilise justify-content: space-between;, il faudrait comparer l'espace entre le conteneur du lien
    Est-ce qu'en CSS, je peux caché des éléments du deuxième niveaux, de manière à ce que la hauteur des containers ne se modifie pas. En jQuery, je peux ajouter une class à ces éléments, si la position top ($('meselements').position().top), n'est pas la même que le tout premier li du menu?
    Pas sûr de tout bien comprendre si ce n'est que au niveau de l’ergonomie/accessibilité j'ai l'impression que tu vas droit dans le mur.
    Je comprends pas pourquoi, j'irai dans un mur. Comparer la hauteur du premier li de mon menu, et de ceux qui passent en deuxième ligne, n'est pas une bonne idée? Si le dernier passe en deuxième ligne, il n'aura forcément pas la même position Y, donc on peut lancer un déclancheur qui le cache.

    Non?

    PS: jQuery sera de toute manière nécessaire, mais je pensais bien faire mon HTML/CSS et les propriétés des flex, jusqu'à leur limite.
    Mais il doit bien avoir une solution pour détecteur la position d'un élément en JS. Je vais chercher de ce coté

    Merci
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  5. #5
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 340
    Points : 41 987
    Points
    41 987
    Par défaut
    Je maintiens que cette présentation de menu n'est pas des plus intuitive et peut être déroutante, ceci étant c'est tout à fait possible mais effectivement pas en utilisant les medias-queries mais plutôt en plaçant un ResizeObserver qui lui va te renseigner sur les changements des dimensions de l'élément observé.

    • Le principe :
    On place un observateur sur le « menu principal » qui va scruter le changement de taille de celui-ci, pour ce faire on utilise l'API ResizeObserver qui remplace avantageusement window.onresize.

    Lors d'un changement de taille du menu, redimensionnement de la fenêtre par exemple, on va vérifier que tous les éléments peuvent être contenus dans celui-ci.

    Si un élément ne peut pas « tenir entièrement » dans le menu alors on le déplace vers le « menu hamburger », tous les suivants seront également déplacés afin de garder la structure du menu. Ce n'est que de la manipulation du DOM.
    La récupération des dimensions se faisant via les propriétés offsetHeight, offsetLeft, offsetTop et offsetWidth, tant pour le parent que pour l'élément.

    • Le code pour voir une façon de faire:
    Code javascript : 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
    "use strict";
    // éléments manipulés
    const elemObserve = document.getElementById("menu-primary");
    const elemChildren = [...elemObserve.children];
    const elemHamburger = document.getElementById("menu-hamburger");
    /**
     * Mise en place d'un observateur sur les dimensions de l'élément menu
     * https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API
     * https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
     */
    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        const elem = entry.target;
     
        // !important il faut replacer les éléments avant test
        while (elemHamburger.firstElementChild) {
          elem.append(elemHamburger.firstElementChild);
        }
        // récup. dimensions pour le test
        const topRef = elemChildren[0].offsetTop;
        const rightRef = elem.offsetLeft + elem.offsetWidth;
     
        // traitement dans le sens inverse des éléments,
        // un élément plus long que les suivants pourrait tout décaler
        [...elemChildren].reverse().forEach((el) => {
          // récup. position de l'élément
          const right = el.offsetLeft + el.offsetWidth;
          const top = el.offsetTop;
          // déplace si masqué
          const isHidden = top > topRef || right > rightRef;
          if (isHidden) {
           // rappel : insertion en début de liste, on est en sens inverse !!!
            elemHamburger.insertBefore(el, elemHamburger.firstElementChild);
          }
        });
        // affiche/masque le conteneur du menu-hamburger
        const emptyList = !elemHamburger.children.length;
        elemHamburger.parentNode.style.display = emptyList ? "none" : "block";
     
        // juste pour visualisation directe
        const action = emptyList ? "remove" : "add";
        elem.parentNode.classList[action]("no-full-list");
      }
    });
    // lance l'observation sur le menu-primary
    resizeObserver.observe(elemObserve);
    ... le code a l'air abscons mais est assez simple en vérité et commenté.

    • Le fichier en ligne pour voir :



    PS :
    J'aurais du vérifier avant de poser ce message.
    Je verrais à fusionner les deux discussions

  6. #6
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    3 083
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 3 083
    Points : 927
    Points
    927
    Par défaut
    Ouha ouha et ouha,
    C'est exactement ce que je cherche à faire depuis 4 jours
    et je suis un peu ...ecoeurer (rire)...
    J'espère pas que tu as fais ça en 5mn?

    J'ai finalement réussi à faire ceci et j'ai abandonné l'idée de passer les éléments dans le hamburger, car je n'y arrivais pas (grrr).
    Du moins, je n'arrivais pas à faire un truc de joli...

    Je calcule bien la taille de tous les éléments et je sauve les caractéristique de ces derniers dans un objet

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu[index] = {
    		  	index: index,
    		  	div_padding: div_padding,
    		  	div_border: div_border,
    		  	div_paddingBorder: div_paddingBorder,
    			a_width: a_width,
    			w_total: div_paddingBorder + a_width,
    			w_total_prev: div_paddingBorder + a_width , // Total de la largeur + total de la largeur des élélements précédents
    			//w_container: w_container,
    		  	name:"li-"+index
    		  };
    w_total_prev me permet de connaître la largeur de l'élément sélectionné et des largeurs des éléments qui le précèdent. Ainsi j'ajoute la class hamburger aux éléments qui dépassent la largeur du conteneur. Avec le Hamburger, j'affiche les éléments cachés ou pas

    Bref, j'ai bien appris.

    J'ai copié ton exemple en local, pour refaire ceci en fonction de ta solution bien plus légère, en gardant mon HTML et les sous menu
    Merci beaucoup
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

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

Discussions similaires

  1. [IP-2010] RechercheV avec une "valeur calculée"
    Par sarah-geek dans le forum InfoPath
    Réponses: 2
    Dernier message: 16/04/2015, 17h20
  2. Réponses: 22
    Dernier message: 22/05/2013, 18h52
  3. Colonne avec une valeur calculée + alerte mail
    Par kikor27 dans le forum Développement Sharepoint
    Réponses: 6
    Dernier message: 05/06/2012, 11h45
  4. Calcul avec une valeur issue d'une relation
    Par malumiere dans le forum W4 Express
    Réponses: 5
    Dernier message: 16/05/2012, 13h58
  5. Formulaire avec une valeur calculée
    Par chaza dans le forum Développement Sharepoint
    Réponses: 2
    Dernier message: 11/01/2012, 15h36

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