So erstellen Sie eine reaktionsfähige vertikale Navigation mit HTML, CSS und jQuery

So erstellen Sie eine reaktionsfähige vertikale Navigation mit HTML, CSS und jQuery

Das Navigationsmenü ist einer der wichtigen Teile der Website und bietet Benutzern die Funktionalität zum Durchsuchen und Navigieren auf der Website. Wie man eine reaktionsfähige vertikale Navigation erstellt, die sich an unterschiedliche Bildschirmgrößen und Geräte anpassen lässt, ist zu einem Problem geworden, das gelöst werden muss. In diesem Artikel zeige ich Ihnen, wie Sie mit HTML, CSS und jQuery eine reaktionsfähige vertikale Navigation erstellen.

Zuerst müssen wir eine grundlegende HTML-Struktur erstellen, die den Container und die Menüpunkte des Navigationsmenüs enthält. Wir verwenden das Tag <nav></nav> als Container für das Navigationsmenü und die Tags <ul></ul> und <li> Erstellen Sie unseren Menüpunkt. Der Code lautet wie folgt: <nav></nav>标签作为导航菜单的容器，使用<ul></ul>和<li>标签来创建我们的菜单项。代码如下：

<nav class="vertical-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

接下来，我们将使用CSS来设置导航菜单的样式。我们需要设置导航菜单的宽度、背景颜色、文字颜色等。同时，为了实现垂直排列的效果，我们还需要设置菜单项的宽度和高度。代码如下：

.vertical-nav {
  width: 200px;
  background-color: #f1f1f1;
}

.vertical-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.vertical-nav li {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.vertical-nav a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 0 20px;
}

.vertical-nav a:hover {
  background-color: #ccc;
  color: #fff;
}

现在，我们已经完成了基本的垂直导航菜单的制作。接下来，我们将使用jQuery来实现菜单项的响应式效果。

首先，我们需要在HTML中引入jQuery的库文件。你可以在jQuery的官方网站上下载最新版本的库文件，并在HTML中使用<script></script>标签引入。代码如下：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

然后，我们将使用jQuery来添加点击事件，当菜单项被点击时，展开或收起子菜单。代码如下：

$(document).ready(function() {
  $('.vertical-nav li').click(function() {
    $(this).find('ul').slideToggle();
  });
});

在上述代码中，我们首先使用$(document).ready()函数来确保文档加载完毕后再执行jQuery代码。然后，我们使用.click()函数将点击事件绑定到菜单项上。当菜单项被点击时，我们使用.slideToggle()函数来显示或隐藏子菜单。

最后，我们还可以使用CSS媒体查询来实现导航菜单的响应式效果。当屏幕宽度小于一定值时，我们可以将导航菜单隐藏起来，使用一个按钮来展开或收起菜单。代码如下：

@media (max-width: 768px) {
  .vertical-nav {
    display: none;
  }

  .vertical-nav.toggle {
    display: block;
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
  }

  .vertical-nav.toggle:before {
    content: "0c9";
    font-family: FontAwesome;
    font-size: 20px;
  }

  .vertical-nav.toggle.active:before {
    content: "00d";
  }
}

在上述代码中，我们使用@media (max-width: 768px)rrreee

Als nächstes verwenden wir CSS, um das Navigationsmenü zu formatieren. Wir müssen die Breite, Hintergrundfarbe, Textfarbe usw. des Navigationsmenüs festlegen. Um den Effekt einer vertikalen Anordnung zu erzielen, müssen wir gleichzeitig auch die Breite und Höhe der Menüelemente festlegen. Der Code lautet wie folgt:

rrreee

Jetzt haben wir die Erstellung des grundlegenden vertikalen Navigationsmenüs abgeschlossen. Als Nächstes verwenden wir jQuery, um die Menüelemente responsiv zu gestalten. 🎜🎜Zuerst müssen wir die jQuery-Bibliotheksdatei in HTML einführen. Sie können die neueste Version der Bibliotheksdatei von der offiziellen Website von jQuery herunterladen und sie mit dem Tag <script></script> in HTML einführen. Der Code lautet wie folgt: 🎜rrreee🎜 Dann verwenden wir jQuery, um Klickereignisse hinzuzufügen, um das Untermenü zu erweitern oder zu reduzieren, wenn auf den Menüpunkt geklickt wird. Der Code lautet wie folgt: 🎜rrreee🎜Im obigen Code verwenden wir zunächst die Funktion $(document).ready(), um sicherzustellen, dass das Dokument geladen wird, bevor der jQuery-Code ausgeführt wird. Anschließend verwenden wir die Funktion .click(), um das Klickereignis an den Menüpunkt zu binden. Wenn auf einen Menüpunkt geklickt wird, verwenden wir die Funktion .slideToggle(), um das Untermenü anzuzeigen oder auszublenden. 🎜🎜Schließlich können wir auch CSS-Medienabfragen verwenden, um responsive Effekte im Navigationsmenü zu erzielen. Wenn die Bildschirmbreite kleiner als ein bestimmter Wert ist, können wir das Navigationsmenü ausblenden und eine Schaltfläche verwenden, um das Menü zu erweitern oder zu reduzieren. Der Code lautet wie folgt: 🎜rrreee🎜Im obigen Code verwenden wir @media (max-width: 768px), um den Stil darzustellen, wenn die Bildschirmbreite weniger als 768 Pixel beträgt. In dieser Medienabfrage blenden wir das Navigationsmenü aus und fügen eine Schaltfläche zum Erweitern oder Reduzieren des Menüs hinzu. Wir verwenden auch die FontAwesome-Symbolbibliothek, um ein „+“- oder „-“-Symbol anzuzeigen, um den erweiterten oder reduzierten Zustand des Menüs anzuzeigen. 🎜🎜Zu diesem Zeitpunkt haben wir die Produktion eines responsiven vertikalen Navigationsmenüs abgeschlossen. Durch die Kombination von HTML, CSS und jQuery realisieren wir den Erweiterungs- oder Reduziereffekt von Menüelementen und stellen reaktionsfähige Menüschaltflächen bereit, wenn die Bildschirmbreite einen bestimmten Wert unterschreitet. Sie können den Code an unterschiedliche Design- und Funktionsanforderungen anpassen und erweitern. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine reaktionsfähige vertikale Navigation mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!