Comment créer une navigation verticale réactive en utilisant HTML, CSS et jQuery

Comment créer une navigation verticale réactive en utilisant HTML, CSS et jQuery

Le menu de navigation est l'une des parties importantes du site Web, offrant aux utilisateurs la fonctionnalité nécessaire pour parcourir et naviguer sur le site Web. Comment créer une navigation verticale réactive qui puisse s'adapter à différentes tailles d'écran et appareils est devenu un problème qui doit être résolu. Dans cet article, je vais vous montrer comment créer une navigation verticale réactive en utilisant HTML, CSS et jQuery.

Tout d'abord, nous devons créer une structure HTML de base qui contient le conteneur et les éléments de menu du menu de navigation. Nous utilisons la balise <nav></nav> comme conteneur pour le menu de navigation, et les balises <ul></ul> et <li> pour créer notre élément de menu. Le code est le suivant : <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

Ensuite, nous utiliserons CSS pour styliser le menu de navigation. Nous devons définir la largeur, la couleur d'arrière-plan, la couleur du texte, etc. du menu de navigation. Dans le même temps, afin d'obtenir l'effet de disposition verticale, nous devons également définir la largeur et la hauteur des éléments de menu. Le code est le suivant :

rrreee

Maintenant, nous avons terminé de créer le menu de navigation verticale de base. Ensuite, nous utiliserons jQuery pour rendre les éléments de menu réactifs. 🎜🎜Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery en HTML. Vous pouvez télécharger la dernière version du fichier de bibliothèque sur le site officiel de jQuery et l'introduire en HTML à l'aide de la balise <script></script>. Le code est le suivant : 🎜rrreee🎜 Ensuite, nous utiliserons jQuery pour ajouter des événements de clic afin de développer ou de réduire le sous-menu lorsque l'utilisateur clique sur l'élément de menu. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons d'abord la fonction $(document).ready() pour nous assurer que le document est chargé avant d'exécuter le code jQuery. Ensuite, nous utilisons la fonction .click() pour lier l'événement click à l'élément de menu. Lorsqu'un élément de menu est cliqué, nous utilisons la fonction .slideToggle() pour afficher ou masquer le sous-menu. 🎜🎜Enfin, nous pouvons également utiliser des requêtes multimédias CSS pour obtenir des effets réactifs sur le menu de navigation. Lorsque la largeur de l'écran est inférieure à une certaine valeur, nous pouvons masquer le menu de navigation et utiliser un bouton pour développer ou réduire le menu. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons @media (max-width : 768px) pour représenter le style lorsque la largeur de l'écran est inférieure à 768 pixels. Dans cette requête multimédia, nous masquons le menu de navigation et ajoutons un bouton pour développer ou réduire le menu. Nous utilisons également la bibliothèque d'icônes FontAwesome pour afficher une icône "+" ou "-" pour indiquer l'état développé ou réduit du menu. 🎜🎜À ce stade, nous avons terminé la production d'un menu de navigation verticale réactif. Grâce à la combinaison de HTML, CSS et jQuery, nous réalisons l'effet d'expansion ou de réduction des éléments de menu et fournissons des boutons de menu réactifs lorsque la largeur de l'écran est inférieure à une certaine valeur. Vous pouvez ajuster et étendre le code pour l’adapter à différentes exigences de conception et fonctionnelles. 🎜

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!