Erstellen Sie ein verschiebbares seitliches Navigationsmenü im responsiven Design

In diesem Tutorial erstellen Sie mithilfe von JavaScript und CSS ein erweiterbares Seitennavigationsmenü. Das Endprodukt ist unten abgebildet:

1. Marke erstellen

Fügen wir zunächst etwas Markup zum Seitenmenü hinzu:

<div id="sideNavigation" class="sidenav">
  <a href="#" class="close-btn">&times;</a>
  <a href="#">About</a>
  <a href="#">Features</a>
  <a href="#">Contact Us</a>
</div>
 
<nav class="topnav">
  <a href="#" class="ham-icon">
    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg>
  </a>
</nav>
 
<section id="main">
  <h1 id="This-Side-Navigation-Menu-Looks-Good">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>
</section>

Hier können Sie sehen, dass wir die eigentliche Navigation in der oberen Leiste mithilfe des Klassentags sidenav 创建了一个侧边菜单 div 。接下来，我们通过 <nav> hinzugefügt haben und SVG für das Seitenmenüsymbol verwendet haben.

Denken Sie daran, den gesamten Inhalt Ihrer Website in einen div id="main" Container zu legen, damit er nach rechts verschoben wird.

2. JavaScript-Code schreiben

Als nächstes fügen wir JavaScript hinzu, das die ham-icon-Klasse verwendet, um auf Klickereignisse auf dem Hamburger-Symbol zu warten, sowie auf die Schaltfläche „Schließen“, die erscheint, nachdem das seitliche Navigationsmenü auf den Bildschirm gleitet.

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";
});

Durch Klicken auf das Hamburger-Symbol sollte die Seitennavigation angezeigt werden. Dazu stellen wir die Breite der Navigation auf den linken Rand von 250px，同时向主要网站内容添加 250px ein.

Durch Klicken auf die Schaltfläche „Schließen“ sollte die Seitennavigation ausgeblendet werden. Dazu ändern wir die Breite der Navigation wieder auf 0 und setzen gleichzeitig den linken Rand des Hauptinhalts der Website auf 0.

3. CSS-Stile verwenden

Schließlich müssen wir etwas CSS verwenden, um das Seitenmenü und die Links auf der Seite zu gestalten. CSS platziert alle Webseitenelemente genau dort, wo wir sie haben möchten. Wir werden auch einige einfache Animationen mithilfe des Attributs transition anwenden. Schauen wir uns CSS Stück für Stück an.

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 4rem;
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  font-family: "Bebas Neue";
}

.sidenav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #bdbdbd;
  display: block;
  transition: 0.4s;
  white-space: nowrap;
  font-size: 2rem;
}

.sidenav a:hover {
  color: white;
  background: #9e9e9e;
}

Wenn wir height设置为100%，并将其初始width设置为0以使其隐藏。但是，只有当 overflow-x 属性的值设置为 hidden die Seitennavigation verwenden, bleibt der Inhalt der Seitennavigation verborgen.

Die Übergangseigenschaft stellt sicher, dass Änderungen in der Breite der Seitennavigation nicht plötzlich erfolgen, und die Beschleunigungsfunktion macht sie etwas elastisch.

Für Links innerhalb der Seitennavigation werden wir white-space 属性的值设置为 nowrap damit der Menütext nicht über mehrere Zeilen hinausgeht.

.sidenav .close-btn {
  position: absolute;
  top: -1rem;
  right: 1rem;
  font-size: 5rem;
}

.sidenav .close-btn:hover {
  background: initial;
  transform: scale(1.2);
}

Der obige CSS-Stil trennt unseren Schließen-Button von den anderen Links in der Seitennavigation. Wir haben eine absolute Positionierung auf die Schließen-Schaltfläche angewendet und verhindert, dass ihr Hintergrund beim Schweben hellgrau wird. Außerdem vergrößert es sich um 20 %, wenn der Benutzer mit der Maus darüber fährt.

Das folgende CSS stellt nun sicher, dass sich die Position des Hauptinhalts synchron mit dem Navigationsmenü bewegt, indem es dieselbe Übergangsdauer und dieselbe Beschleunigungsfunktion verwendet. Durch die Platzierung von overflow-x 属性的值设置为 hidden wird sichergestellt, dass beim Verschieben des Inhalts keine horizontalen Bildlaufleisten angezeigt werden.

#main {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
 overflow-x: hidden; 
}

Mit Hilfe des folgenden CSS können wir dem Hamburger-Symbol auch eine kleine Drehbewegung hinzufügen. Es dreht das Hamburger-Symbol in 0,5 Sekunden um 180 Grad.

a svg {
  transition: all 0.5s ease;
}
a svg:hover {
  transform: rotate(180deg);
}

Abschließend machen wir das Navigationsmenü responsiv, indem wir den Abstand und die Größe der Links mithilfe des folgenden CSS anpassen. Dadurch wird sichergestellt, dass das Menü auf Bildschirmen mit weniger vertikalem Platz nicht den Rahmen überschreitet.

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

An diesem Punkt sollte Ihr Navigationsmenü wie in der folgenden CodePen-Demo aussehen.

4. Diashow entfernen

Damit das Menü ohne Folienanimation angezeigt wird, ändern Sie einfach die CSS-Eigenschaft transition wie in der Kurzform unten dargestellt:

.sidenav {
    transition: 0s; 
}

#main {
    transition: margin-left 0s;
}

Dadurch werden die Änderungen sofort angezeigt, da in transition 中没有指定延迟。我们使用的默认值是 0.5s keine Verzögerung angegeben ist. Der von uns verwendete Standardwert ist 0,5s.

Fazit

Das Erstellen eines Seitenmenüs erfordert nur wenige Codezeilen und erfordert nicht viele Ressourcen. Sorgen Sie dafür, dass Ihr Code auf unterschiedliche Bildschirmauflösungen von Geräten reagiert, indem Sie Ihr CSS ändern, indem Sie Medienabfragen für Ihre spezifischen Fälle hinzufügen.

Um noch einen Schritt weiter zu gehen, möchten Sie vielleicht ein CSS-Framework wie Bootstrap oder Bulma verwenden, um Ihr Menü zu gestalten.

Dieser Artikel wurde mit einem Beitrag von Monty Shokeen aktualisiert. Monty ist ein Full-Stack-Entwickler, der auch gerne Tutorials schreibt und neue JavaScript-Bibliotheken erlernt.

Das obige ist der detaillierte Inhalt vonErstellen Sie ein verschiebbares seitliches Navigationsmenü im responsiven Design. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!