Étiquette : flexbox

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

08/01/2020 / admin

Demo jsfiddle.net et code source zippé à télécharger.

Source HTML

<div class="navDesktop navDesktopType-normal">

  <h2>.navDesktop.navDesktopType-normal</h2>
  <nav id="navDesktop">
    <ul class="navDesktop-level0">
      <li>
        <a href="#">chemises & couvertures HORSEWIN</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">chemises de box</a>
          </li>
          <li>
            <a href="#">couvertures d'écurie</a>
          </li>
          <li>
            <a href="#">couvertures d'extérieur</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">nutrition</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">aliments complets</a>
            <ul class="navDesktop-level2">
              <li>
                <a href="#">gamme club & loisirs</a>
              </li>
              <li>
                <a href="#">gamme sport</a>
              </li>
              <li>
                <a href="#">gamme course</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">litière</a>
      </li>
    </ul>
  </nav>

</div>

<div class="navDesktop navDesktopType-incremental">

  <h2>.navDesktop.navDesktopType-incremental</h2>
  <nav id="navDesktop">
    <ul class="navDesktop-level0">
      <li>
        <a href="#">bovins</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">alimentation & compléments</a>
            <ul class="navDesktop-level2">
              <li>
                <a href="#">matières premières</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">matières premières</a>
                  </li>
                  <li>
                    <a href="#">matières grasses</a>
                  </li>
                  <li>
                    <a href="#">argiles et charbon</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">seaux et pierres à lécher</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">pierres à lécher</a>
                  </li>
                  <li>
                    <a href="#">seaux à lécher</a>
                  </li>
                  <li>
                    <a href="#">supports pour seaux et pierres</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">bolus</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">power bol</a>
                  </li>
                  <li>
                    <a href="#">bolus longue durée pressés</a>
                  </li>
                  <li>
                    <a href="#">bolus à diffusion rapide</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">Minéraux</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">Max-ME</a>
                  </li>
                  <li>
                    <a href="#">Max-MS</a>
                  </li>
                  <li>
                    <a href="#">Max-MH</a>
                  </li>
                  <li>
                    <a href="#">Maxor</a>
                  </li>
                  <li>
                    <a href="#">Formules vaches taries</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Veaux</a>
          </li>
          <li>
            <a href="#">Pâturage</a>
          </li>
          <li>
            <a href="#">Reproduction</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">porcs</a>
      </li>
      <li>
        <a href="#">volailles</a>
      </li>
    </ul>
  </nav>

</div>

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

<h2>.navDesktop.navDesktopType-normal</h2>

<li>

<a href="#">chemises & couvertures HORSEWIN</a>

<li>

<a href="#">chemises de box</a>

</li>

<li>

<a href="#">couvertures d'écurie</a>

</li>

<li>

<a href="#">couvertures d'extérieur</a>

</li>

</ul>

</li>

<li>

<a href="#">nutrition</a>

<li>

<a href="#">aliments complets</a>

<li>

<a href="#">gamme club & loisirs</a>

</li>

<li>

<a href="#">gamme sport</a>

</li>

<li>

<a href="#">gamme course</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">litière</a>

</li>

</ul>

</nav>

</div>

<h2>.navDesktop.navDesktopType-incremental</h2>

<li>

<a href="#">bovins</a>

<li>

<a href="#">alimentation & compléments</a>

<li>

<a href="#">matières premières</a>

<li>

<a href="#">matières premières</a>

</li>

<li>

<a href="#">matières grasses</a>

</li>

<li>

<a href="#">argiles et charbon</a>

</li>

</ul>

</li>

<li>

<a href="#">seaux et pierres à lécher</a>

<li>

<a href="#">pierres à lécher</a>

</li>

<li>

<a href="#">seaux à lécher</a>

</li>

<li>

<a href="#">supports pour seaux et pierres</a>

</li>

</ul>

</li>

<li>

<a href="#">bolus</a>

<li>

<a href="#">power bol</a>

</li>

<li>

<a href="#">bolus longue durée pressés</a>

</li>

<li>

<a href="#">bolus à diffusion rapide</a>

</li>

</ul>

</li>

<li>

<a href="#">Minéraux</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">Maxor</a>

</li>

<li>

<a href="#">Formules vaches taries</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">Veaux</a>

</li>

<li>

<a href="#">Pâturage</a>

</li>

<li>

<a href="#">Reproduction</a>

</li>

</ul>

</li>

<li>

<a href="#">porcs</a>

</li>

<li>

<a href="#">volailles</a>

</li>

</ul>

</nav>

</div>

Source CSS

/* reset */
ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}



/* core */
.navDesktop {}

.navDesktop-level1,
.navDesktop-level2 {
  display: none;
}

.navDesktopType-normal {}
.navDesktopType-incremental {}

.navDesktop-level0 > li:hover > .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level1 > li:hover > .navDesktop-level2 {
  display: flex;
}



/* layout */
.navDesktop-level0 {
  position: relative;
  display: flex;
}

.navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  width: 100%;
}

.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}



/* skin */
.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  max-height: 200px;
}

.navDesktop a {
  padding-right: 15px;
}

.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  background: #ececec;
}

.navDesktopType-normal .navDesktop-level1 > li > a,
.navDesktopType-incremental .navDesktop-level2 > li > a {
  font-size: 1.1em;
  font-weight: 700;
}

.navDesktopType-incremental .navDesktop-level1 {
  background: pink;
}

/* reset */

ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

/* core */

.navDesktop {}

.navDesktop-level1,

.navDesktop-level2 {

display: none;

}

.navDesktopType-normal {}

.navDesktopType-incremental {}

.navDesktop-level0 > li:hover > .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level1 > li:hover > .navDesktop-level2 {

display: flex;

}

/* layout */

.navDesktop-level0 {

position: relative;

display: flex;

}

.navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

position: absolute;

z-index: 1;

left: 0;

top: 100%;

width: 100%;

}

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

flex-direction: column;

flex-wrap: wrap;

align-content: flex-start;

}

/* skin */

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

max-height: 200px;

}

.navDesktop a {

padding-right: 15px;

}

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

background: #ececec;

}

.navDesktopType-normal .navDesktop-level1 > li > a,

.navDesktopType-incremental .navDesktop-level2 > li > a {

font-size: 1.1em;

font-weight: 700;

}

.navDesktopType-incremental .navDesktop-level1 {

background: pink;

}

[CSS] Alignements compliqués avec Flexbox

11/06/2019 / admin

Sources:

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Source: Center and right align flexbox elements.

Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element) testée et fonctionne.

ul::before {
  content:"D";
  margin: 1px auto 1px 1px;
  visibility: hidden;
  padding: 5px;
  background: #ddd;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

ul::before {

content:"D";

margin: 1px auto 1px 1px;

visibility: hidden;

padding: 5px;

background: #ddd;

}

li:last-child {

margin-left: auto;

background: #ddd;

}

ul {

padding: 0;

margin: 0;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

}

li {

display: flex;

margin: 1px;

padding: 5px;

background: #aaa;

}

p { text-align: center; margin-top: 0; }

span { background-color: aqua; }

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

<ul>

</ul>

<p><span>true center</span></p>

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

30/10/2017 / admin

Doc Foundation 6 – Flex Grid – @mixin flex-grid-size

  .footer {
    padding: $global-padding 0;
    @include flex-grid-row(
      $gutters: 0);

    &-column {
      @include flex-grid-size(
        $columns:  22.22222%);
      &:last-child {
        @include flex-grid-size(
          $columns: 33.33333%);
      }    
    }
  }

.footer {

padding: $global-padding 0;

@include flex-grid-row(

$gutters: 0);

&-column {

@include flex-grid-size(

$columns: 22.22222%);

&:last-child {

@include flex-grid-size(

$columns: 33.33333%);

}

Une rangée basée sur 8 colonnes

.row-8 {
  @include flex-grid-row($columns: 8);
  .column {
    @include flex-grid-column($columns: 1/8);
    &.large-6 {
      @include flex-grid-column($columns: 6/8);
    }
  }
  .columns {
    @extend .column;
  }
}

.row-8 {

@include flex-grid-row($columns: 8);

.column {

@include flex-grid-column($columns: 1/8);

&.large-6 {

@include flex-grid-column($columns: 6/8);

}

.columns {

@extend .column;

}

[Flexbox] Astuces et ressources utiles

28/07/2016 / admin

Tutoriels Flexbox

Tutoriels sur Flexbox par la-cascade.io (en français)
flexbox sheet – guide illustré des propriétés par le Magazine du Webdesign
A Visual Guide to CSS3 Flexbox Properties
Solved by Flexbox – Cleaner, hack-free CSS
Designing A Product Page Layout with Flexbox

Layout, mise en page

Mélanger largeurs fluides et fixes avec `flex-grow`

The “Holy Grail” 3 column liquid layout with pixel-widths.

<main>
  <section>rest</section>
  <aside>150px</aside>
</main>

<main>

</main>

section {
  flex-grow: 1;
}

aside {
  flex-basis: 150px;
  flex-shrink: 0; 
  /* flex-shrink: 0; prevents the aside from shrinking, if the section attempts to grow due to its content. (see third example) */
  
  /* Instead of flex-basis: 150px; and flex-shrink: 0; you can use the shorthand: */
  /* flex: 0 0 150px; */
}

section {

flex-grow: 1;

}

aside {

flex-basis: 150px;

flex-shrink: 0;

/* flex-shrink: 0; prevents the aside from shrinking, if the section attempts to grow due to its content. (see third example) */

/* Instead of flex-basis: 150px; and flex-shrink: 0; you can use the shorthand: */

/* flex: 0 0 150px; */

}

Différentes astuces sur la manière de cibler les sélecteurs

Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do

Outils Flexbox

Flexplorer est un outil en ligne qui permet de jouer en live avec les valeurs du modèle Flexbox

Utiliser Flexbox avec des navIEgateurs de merde

Normalizing Cross-browser Flexbox Bugs

Source: Normalizing Cross-browser Flexbox Bugs.

`flex-grow` et `flex-shrink` craquent leurs slips sous IE10+

Il faut donner une largeur fixe (en %, ça ira très bien…) à l’élément sur lequel on a assigné la propriété flex-grow ou flex-shrink.

Ressources en ligne:

Normalizing Cross-browser Flexbox Bugs by Philip Walton
Flexbugs – A community-curated list of flexbox issues and cross-browser workarounds for them.
Almost complete guide to flexbox (without flexbox)

[CSS][jQuery] Un menu déroulant fondé sur flexbox (modèle tabulaire en fallback IE9-) et un sous-niveau centré horizontalement avec outerWidth

18/09/2014 / admin

Avant de mettre en place cette solution, voir en bas de page les contraintes et choses restant à améliorer !!

Simulation : Menu déroulant Flexbox.

Pré-requis :

Le premier niveau doit occuper 100% de l’espace disponible en largeur,
les libellés de premier niveau ne doivent pas occuper un espace à largeur fixe (chaque libellé à une largeur en fonction de sa longueur),
les espaces entre les libellés de premier niveau doivent être strictement identiques,
les sous-niveau doivent être centrés horizontalement sur l’axe médian libellé de premier niveau > sous-niveau,
compatibilité navigateurs avec prise en charge ciblée des différents états de la spécification de Flexbox (ancienne et nouvelle) et fallback IE10-.

Quelques aspects techniques :

[CSS|Flexbox] Les écarts gauche/droite entre chaque entrées sont distribués de façon homogène, grâce à flexbox.
[jQuery] Chrome qui semble ne pas interpréter correctement la présence de paddings dans le sous menu lorsqu’on utilise la propriété outerWidth de jQuery pour calculer le positionnement centré horizontalement du sous menu par rapport à son entrée parente.

Edit: ajout d’un span.medial-axis-alignment pour englober les libellés de 1er niveau sans les marges et calculer en jQuery le positionnement des sous-niveaux par rapport à l’axe médiant.
~~[CSS] position: relative; qui n’est pas bien gérée sous Firefox avec display: table; et display: table-cell;.~~ Edit: le menu est passé d’une structure fondée sur le modèle tabulaire à une structure fondée sur flexbox. Le modèle tabulaire reste proposé en guise de fallback pour les navigateurs IE9-.

Remarques importantes pour la compatibilité cross-browsers :

Pour effectuer le switch entre vieille et nouvelle spécification Flexbox, les styles ont été déclarés dans l’ordre suivant :

1. les propriétés propres à l’ancienne spécification avec les préfixes -webkit, -moz, -o, et sans préfixe :

/* Old 2009 version support */
/* Firefox 27-, Chrome 20-, Safari 6- */
.primary-nav .level1{
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: box;
}

.primary-nav .level1 li{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
}

/* Old 2009 version support */

/* Firefox 27-, Chrome 20-, Safari 6- */

.primary-nav .level1{

display: -webkit-box;

display: -moz-box;

display: -o-box;

display: box;

}

.primary-nav .level1 li{

-webkit-box-flex: 1;

-moz-box-flex: 1;

-o-box-flex: 1;

box-flex: 1;

}

2. les propriétés propres à la nouvelle spécification avec un suffixe !important.

/* Current specification */ .primary-nav .level1{ display: flex !important; } .primary-nav .level1 li{ flex-grow: 1 !important; }

1
2
3
4
5
6
7
8

/* Current specification */
.primary-nav .level1{
display: flex !important;
}

.primary-nav .level1 li{
flex-grow: 1 !important;
}

Ciblage CSS IE9, IE8 obtenu avec la mise en place de commentaires conditionnels dans la balise head de la page et de classes .ie8, .ie9 dans la CSS :

<!--[if IE 8 ]>
  <html lang="fr" class="ie8">
<![endif]-->

<!--[if IE 9 ]>
  <html lang="fr" class="ie9">
<![endif]-->

<!--[if IE 8 ]>

<![endif]-->

<!--[if IE 9 ]>

<![endif]-->

.ie8 .primary-nav .level1,
.ie9 .primary-nav .level1{
  display: table;
}

.ie8 .primary-nav .level1 li,
.ie9 .primary-nav .level1 li{
  display: table-cell;
}

.ie8 .primary-nav .level1,

.ie9 .primary-nav .level1{

display: table;

}

.ie8 .primary-nav .level1 li,

.ie9 .primary-nav .level1 li{

display: table-cell;

}

Ciblage CSS IE10 obtenu avec la mise en place de la méthode décrite ici : IE 10 Specific Styles.

/* Deux lignes de javascript pour ajouter le User Agent à l'élément <HTML> */
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

/* Deux lignes de javascript pour ajouter le User Agent à l'élément <HTML> */

var doc = document.documentElement;

doc.setAttribute('data-useragent', navigator.userAgent);

/* Styler à partir du User Agent */
html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

/* Styler à partir du User Agent */

html[data-useragent*='MSIE 10.0'] h1 {

color: blue;

}

Code jQuery à exécuter pour centrer les sous-menu par rapport aux largeurs des premiers niveaux

jQuery('.primary-nav .level2').each(function() {
    var nav_sub_item_width = 220; /* if you modify this value, remember to modify it in 'navigation.css' too */
    var nav_primary_item_width = jQuery(this).closest('.medial-axis-alignment').outerWidth();
    var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2) + 12;
    //var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2); /* remove padding value in some cases */

    jQuery(this).css('margin-left', -wanted_value);
});

jQuery('.primary-nav .level2').each(function() {

var nav_sub_item_width = 220; /* if you modify this value, remember to modify it in 'navigation.css' too */

var nav_primary_item_width = jQuery(this).closest('.medial-axis-alignment').outerWidth();

var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2) + 12;

//var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2); /* remove padding value in some cases */

jQuery(this).css('margin-left', -wanted_value);

});

Cas particuliers et adaptation de code à apporter :

Dans le cas où les sous-menus ne sont pas correctement centrés par rapport à l’axe médian, lancer le bout de code jQuery seulement après que la page se soit entièrement chargée :

$(window).bind("load", function() {
   // code here
});

$(window).bind("load", function() {

// code here

});

…ou mieux (sans le bind) :

jQuery(window).load(function() {
  // code here
});

jQuery(window).load(function() {

// code here

});

Remarque à propos de la gestion des paddings par jQuery (notamment sous Chrome) : pour une raison obscure, la valeur du padding (+ 12 dans le calcul de la valeur servant à aligner le sous-menu sur l’axe médian du libellé de premier niveau) concourt à obtenir un alignement correct dans la simulation effectuée par le biais de JSFiddle, mais il a fallu la supprimer dans un autre cas de figure rencontré…

var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2) + 12;

1	var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2) + 12;

Décalage du sous-menu sous Chrome – appliquer la solution ci dessous :

.primary-nav .level1 li:hover .level2{
  left: -12px; /* IN SOME CASES - fixes Chrome medial axis vertical alignment bug */
}

.primary-nav .level1 li:hover .level2{

left: -12px; /* IN SOME CASES - fixes Chrome medial axis vertical alignment bug */

}

Fallback IE9- en jQuery

Polyfill IE9- (non-testé – nécessite Selectivizr) : Flexie.js.

A améliorer : l’alignement vertical des libellés de 1er niveau n’est pas géré.

Articles récents

Catégories

Archives

Méta

Étiquette : flexbox

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

Source HTML

Source CSS

[CSS] Alignements compliqués avec Flexbox

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

Une rangée basée sur 8 colonnes

[Flexbox] Astuces et ressources utiles

Tutoriels Flexbox

Layout, mise en page

Mélanger largeurs fluides et fixes avec `flex-grow`

Différentes astuces sur la manière de cibler les sélecteurs

Outils Flexbox

Utiliser Flexbox avec des navIEgateurs de merde

Normalizing Cross-browser Flexbox Bugs

`flex-grow` et `flex-shrink` craquent leurs slips sous IE10+

Ressources en ligne:

Source HTML

Source CSS

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Une rangée basée sur 8 colonnes

Tutoriels Flexbox

Layout, mise en page

Mélanger largeurs fluides et fixes avec flex-grow

Différentes astuces sur la manière de cibler les sélecteurs

Outils Flexbox

Utiliser Flexbox avec des navIEgateurs de merde

Normalizing Cross-browser Flexbox Bugs

flex-grow et flex-shrink craquent leurs slips sous IE10+

Ressources en ligne:

Code jQuery à exécuter pour centrer les sous-menu par rapport aux largeurs des premiers niveaux

Cas particuliers et adaptation de code à apporter :

Mélanger largeurs fluides et fixes avec `flex-grow`

`flex-grow` et `flex-shrink` craquent leurs slips sous IE10+