Comment implémenter un grand menu déroulant en utilisant CSS

Les menus déroulants peuvent être utilisés dans de nombreuses pages Web. Cet article présente principalement les informations pertinentes sur l'exemple de code d'un grand menu déroulant implémenté en CSS pur. Le contenu est assez bon. maintenant et donnez-le comme référence.

Il s'agit d'un grand menu déroulant implémenté en CSS pur. Ce grand menu est réalisé à l'aide de code HTML et CSS pur, sans aucun code js, et ne repose sur aucun plug-in tiers. Convient aux grands sites Web comportant de nombreuses catégories de colonnes.

Structure HTML

La structure HTML du méga menu est la suivante :

<nav>
  <ul class="container ul-reset">
    <li><a href=&#39;#&#39;>Home</a></li>
    <li class=&#39;droppable&#39;>
      <a href=&#39;#&#39;>Category One</a>
      <p class=&#39;mega-menu&#39;>
        <p class="container cf">
          <ul class="ul-reset">
            <h3>Heading 1</h3>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 2</h3>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 3</h3>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
            <li><a href=&#39;#&#39;>Category One Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 4</h3>
            <li><img src="http://placehold.it/205x172"></li>
          </ul>
        </p><!-- .container -->
      </p><!-- .mega-menu -->
    </li><!-- .droppable -->
    <li class=&#39;droppable&#39;>
      <a href=&#39;#&#39;>Category Two</a>
      <p class=&#39;mega-menu&#39;>
        <p class="container cf">
          <ul class="ul-reset">
            <h3>Heading 1</h3>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 2</h3>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 3</h3>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 4</h3>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
            <li><a href=&#39;#&#39;>Category Two Sublink</a></li>
          </ul><!-- .ul-reset -->
        </p><!-- .container -->
      </p><!-- .mega-menu-->
    </li><!-- .droppable -->
    <li><a href=&#39;#&#39;>Category Three</a></li>
    <li><a href=&#39;#&#39;>Category Four</a></li>
    <li><a href=&#39;#&#39;>Category Five</a></li>
    <li><a href=&#39;#&#39;>Category Six</a></li>
  </ul><!-- .container .ul-reset -->
</nav>

CSS

Ajoutez le style CSS suivant au grand menu :

/* #Resets
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;  }
/* #Universal and Default Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
    background: url(../img/black-wood-small.jpg);
    color: #ddd;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-align: center;
}
a {text-decoration: none;}
h1 {
  font-size: 40px;
    font-weight: 700;
  margin-bottom: 20px;
    margin-top: 20px;
}
h2 {
  font-size: 15px;
    font-weight: 600;
  margin-bottom: 30px;
    margin-top: 10px;
}
.container {
  margin: auto;
  width: 940px;
}
.ul-reset {
  padding-left: 0;
   margin-top: 0;
   margin-bottom: 0;
  list-style: none;
}
/* #Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
  background: #424242;
  font-size: 0;
  position: relative;
}
nav > ul > li {
  display: inline-block;
    font-size: 14px;
    padding: 0 15px;
    position: relative;
}
nav > ul > li:first-child {padding-left: 0;}
nav > ul > li:last-child {padding-right: 0;}
nav > ul > li > a {
  color: #fff;
    display: block;
    position: relative;
    padding: 20px 0;
    border-bottom: 3px solid transparent;
}
nav > ul > li:hover > a {
  color: #69aae0; 
    border-bottom: 3px solid #69aae0;
}
/* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu {
  background: #f0f0f0;
    display: none;
    left: 0;
    position: absolute;
    text-align: left;
    width: 100%;
}
.mega-menu h3 {color: #444;}
.mega-menu ul {
  float: left;
    margin-bottom: 20px;
    margin-right: 40px;
    width: 205px;
}
.mega-menu ul:last-child {margin-right: 0;}
.mega-menu a {
  border-bottom: 1px solid #ddd;
    color: #4ea3d8;
    display: block;
    padding: 10px 0;
}
.mega-menu a:hover {color: #2d6a91;}
/* #Droppable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {position: static;}
.droppable > a:after {
  content: "\f107";
    font-family: FontAwesome;
    font-size: 12px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}
.droppable:hover .mega-menu {display: block;}
/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before,
.cf:after {
  content: " "; /* 1 */
   display: table; /* 2 */
}
.cf:after {clear: both;}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention. au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS3 pour implémenter la mise en page du flux en cascade

Implémentation du chargement des pages Web CSS3 et HTML5 barre de progression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!