horizontal – devfrontend.info

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 : horizontal

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

Source HTML

Source CSS

[CSS] Trouver l’élément trop large qui fait apparaître une scroll barre horizontale dans votre page