Hoe te maken: subnavigatie

Leer hoe je een subnavigatiemenu maakt met CSS.

Maak subnavigatie

Eerste stap - Voeg HTML toe:

<!-- 加载 Font Awesome 图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 导航菜单 -->
<div class="navbar">
  <a href="#home">Home</a>
  <div class="subnav">
    <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#company">Company</a>
      <a href="#team">Team</a>
      <a href="#careers">Careers</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#bring">Bring</a>
      <a href="#deliver">Deliver</a>
      <a href="#package">Package</a>
      <a href="#express">Express</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
      <a href="#link4">Link 4</a>
    </div>
  </div>
  <a href="#contact">Contact</a>
</div>

Voorbeelduitleg:

Je kunt elk element gebruiken om een subnavigatie/dropdown-menu te openen, zoals <button>、<a> of <p>-elementen.

Maak een subnavigatiemenu door een containerlement (zoals <div>) te gebruiken en subnavigatielinks toe te voegen aan deze container.

Gebruik <div>-elementen om de knoppen en <div> te omhullen, zodat de subnavigatiemenu correct geplaatst kan worden met CSS.

Tweede stap - Voeg CSS toe:

/* Navigatiemenu */
.navbar {
  overschotten: verborgen;
  achtergrondkleur: #333;
{}
/* Navigatielink */
.navbar a {
  zeef: links;
  lettergrootte: 16px;
  kleur: wit;
  tekstuitlijning: center;
  inleg: 14px 16px;
  tekstdecoratie: none;
{}
/* Subnavigatiemenu */
.subnav {
  zeef: links;
  overschotten: verborgen;
{}
/* Subnavigatieknop */
.subnav .subnavbtn {
  lettergrootte: 16px;
  rand: none;
  omtrek: none;
  kleur: wit;
  inleg: 14px 16px;
  achtergrondkleur: erfgenaamd;
  lettertype: erfgenaamd;
  marge: 0;
{}
/* Voeg een rood achtergrondkleur toe aan de navigatielinks bij mouseover */
.navbar a:hover, .subnav:hover .subnavbtn {
  achtergrondkleur: rood;
{}
/* Stel de stijl van de subnavigatieinhoud in - gebruik absolute positie */
.subnav-content {
  weergave: niet zichtbaar;
  positie: absoluut;
  links: 0;
  achtergrondkleur: rood;
  breedte: 100%;
  z-INDEX: 1;
{}
/* Stel de stijl van de subnavigatielinks in */
.subnav-content a {
  zeef: links;
  kleur: wit;
  tekstdecoratie: none;
{}
/* Voeg een grijs achtergrondkleur toe bij het mouseover */
.subnav-content a:hover {
  achtergrondkleur: #eee;
  kleur: zwart;
{}
/* Wanneer je de muis over de subnavigatiecontainer hebt, opent de subnavigatieinhoud */
.subnav:hover .subnav-content {
  display: block;
{}

Try it yourself