mega menu – devfrontend.info

Souvent, le fond d’un menu déroulant occupe l’espace dans la limite de l’élément .container d’une page.

La classe .nav-open sur l’élément body permet de placer un overflow-x: hidden; qui va venir empêcher l’apparition d’un scroll horizontal dans le fenêtre de votre navigateur lorsque le menu sera ouvert.

    body.nav-open {
        overflow-x: hidden;
    }
    .navigation {
        ul .level0 .submenu__container {
            &:before,
            &:after {
                position: absolute;
                z-index: 0;
                content: "";
                width: 50%;
                height: 100%;
                top: 0;
                background: #fff;
            }
            &:before {
                left: -50%;
            }
            &:after {
                right: -50%;
            }
        }
    }
}

body.nav-open {

overflow-x: hidden;

}

.navigation {

ul .level0 .submenu__container {

&:before,

&:after {

position: absolute;

z-index: 0;

content: "";

width: 50%;

height: 100%;

top: 0;

background: #fff;

}

&:before {

left: -50%;

}

&:after {

right: -50%;

}

    $(document).on('mouseenter', '.navigation', function() {
        $('body').addClass('nav-open');
    }).on('mouseleave', '.navigation', function() {
        $('body').removeClass('nav-open');
    });

$(document).on('mouseenter', '.navigation', function() {

$('body').addClass('nav-open');

}).on('mouseleave', '.navigation', function() {

$('body').removeClass('nav-open');

});

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;

}

Articles récents

Catégories

Archives

Méta

Étiquette : mega menu

[jQuery][CSS] Etendre le fond d’un mega menu déroulant sur toute la largeur de la fenêtre du navigateur

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

Source HTML

Source CSS