Erstellen eines Siebseiten -Navigationmenüs für reaktionsschnelle Designs

Dieses Tutorial zeigt, wie Sie mit JavaScript und CSS ein reaktionsschnell erweiterbares Nebennavigationsmenü erstellen. Das Endergebnis ist ein elegantes, modernes Menü.

Hier ist eine lebende Demo:

1. HTML -Struktur:

Beginnen Sie mit dem Hinzufügen des HTML für das Seitenmenü:

<div class="sidenav" id="sideNavigation">
  <a class="close-btn" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">×</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Features</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact Us</a>
</div>

<nav class="topnav">
  <a class="ham-icon" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <svg height="30" id="icoOpen" width="30">
      <path d="M0,5 30,5" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,14 30,14" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,23 30,23" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
    </svg>
  </a>
</nav>

<main id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

Dies richtet das Seitenmenü (sidenav), ein Hamburger -Symbol (ham-icon) ein, um es zu öffnen, eine Schließung (close-btn) und den Hauptinhaltsbereich (main).

2. JavaScript -Funktionalität:

Dieses JavaScript übernimmt die geöffneten und schließenden Aktionen des Menüs:

document.querySelector("a.ham-icon").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});

document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

Klicken auf das Hamburger -Symbol erweitert das Menü. Wenn Sie auf die Schaltfläche Schließen klicken, fällt dies zusammen.

3. CSS -Styling:

Das CSS stilft das Menü und seine Animation:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
  overflow-x: hidden;
}

a svg {
  transition: all 0.5s ease;
}

a svg:hover {
  transform: rotate(180deg);
}

@media screen and (max-height: 480px) {
  .sidenav {
    padding-top: 3rem;
  }
  .sidenav a {
    font-size: 1.5rem;
  }
}

Dieses CSS bietet die glatte Folie -Animation, verarbeitet Überlauf und fügt die Reaktionsfähigkeit für kleinere Bildschirme hinzu. Das overflow-x: hidden; am Körper verhindert horizontale Bildlaufleisten.

4. Entfernen der Folienanimation (optional):

Um die Folienanimation zu entfernen, stellen Sie die transition Eigenschaften auf 0s in Ihrem CSS:

.sidenav {
  transition: 0s;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0s;
}

Dies lässt das Menü sofort erscheinen und verschwinden.

Schlussfolgerung:

Dieses einfache, aber effektive Menü der Seitennavigation ist leicht anpassbar und anpassbar an verschiedene Designanforderungen. Erwägen Sie, ein CSS -Framework wie Bootstrap oder Bulma für fortschrittlichere Styling -Optionen zu verwenden. Vielen Dank an Monty Shokeen für seine Beiträge!

Das obige ist der detaillierte Inhalt vonErstellen eines Siebseiten -Navigationmenüs für reaktionsschnelle Designs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!