Maison >interface Web >tutoriel CSS >Étapes pour implémenter l'effet de menu à onglets déroulants d'une barre de navigation réactive utilisant du CSS pur

Étapes pour implémenter l'effet de menu à onglets déroulants d'une barre de navigation réactive utilisant du CSS pur

WBOYoriginal: 2023-10-28 09:58:491723parcourir

Étapes pour implémenter leffet de menu à onglets déroulants dune barre de navigation réactive utilisant du CSS pur

La barre de navigation est l'un des éléments courants dans les pages Web, et le menu à onglets déroulant est un effet souvent utilisé dans la barre de navigation. Peut fournir plus d’options de navigation. Cet article explique comment utiliser du CSS pur pour implémenter un effet de menu à onglets déroulants dans la barre de navigation réactive.

Étape 1 : Créer une structure HTML de base

Nous devons d'abord créer une structure HTML de base pour la démonstration et ajouter quelques styles à la barre de navigation. Ce qui suit est une structure HTML simple :

<!DOCTYPE html>
<html>
  <head>
    <title>响应式导航栏</title>
    <style>
      /* 导航栏样式 */
      .navbar {
        background-color: #333;
        overflow: hidden;
      }
      
      /* 导航栏选项样式 */
      .navbar a {
        float: left;
        color: #fff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      
      /* 导航栏选项悬停样式 */
      .navbar a:hover {
        background-color: #ddd;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#">首页</a>
      <a href="#">新闻</a>
      <a href="#">图片</a>
      <a href="#">视频</a>
      <a href="#">论坛</a>
      <a href="#">联系我们</a>
      <a href="javascript:void(0);" class="icon" onclick="responsiveMenu()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
  </body>
</html>

Étape 2 : Ajouter des styles CSS

Ensuite, nous devons ajouter quelques styles CSS pour obtenir l'effet d'une barre de navigation réactive. Nous pouvons utiliser des requêtes multimédias pour définir des styles pour différentes tailles d'écran. Voici le style CSS de l'exemple :

/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 导航栏选项隐藏样式 */
.navbar a:not(:first-child) {
  display: none;
}

/* 响应式导航栏样式 */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {
    display: none;
  }
  
  /* 显示导航栏选项 */
  .navbar a.icon {
    float: right;
    display: block;
  }
  
  /* 导航栏选项悬停样式 */
  .navbar.responsive a.icon {
    background-color: #ddd;
    color: #333;
  }
  
  /* 导航栏选项悬停后的下拉菜单样式 */
  .navbar.responsive .navbar-dropdown {
    display: block;
  }
  
  /* 导航栏下拉菜单样式 */
  .navbar-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    z-index: 1;
  }
  
  /* 导航栏下拉菜单选项样式 */
  .navbar-dropdown a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* 导航栏下拉菜单选项悬停样式 */
  .navbar-dropdown a:hover {
    background-color: #f1f1f1;
  }
}

Étape 3 : Ajouter du code JavaScript

Pour réaliser l'effet de la barre de navigation réactive, nous devons également utiliser JavaScript pour contrôler l'expansion et la réduction du menu. Voici un exemple de code JavaScript simple :

/* 响应式导航栏菜单展开与收起的函数 */
function responsiveMenu() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

Étape 4 : Ajouter le contenu du menu déroulant

Enfin, nous devons ajouter le contenu du menu déroulant à la barre de navigation. Cette partie du contenu sera placée dans une classe <div>标签中，并使用<code>.navbar-dropdown pour le contrôle du style. Voici un exemple :

<div class="navbar-dropdown">
  <a href="#">音乐</a>
  <a href="#">游戏</a>
  <a href="#">电影</a>
  <a href="#">书籍</a>
</div>

En résumé, grâce aux quatre étapes ci-dessus, nous pouvons obtenir un simple effet de menu déroulant d'onglets de barre de navigation réactive CSS pur. Grâce aux requêtes multimédias et à JavaScript, nous pouvons afficher et masquer le contenu dans différentes tailles d'écran pour offrir aux utilisateurs une meilleure expérience.

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!

JavaScript css html

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explorer les propriétés de décoration de texte CSS : text-decoration et text-transformArticle suivant：Explorer les propriétés de décoration de texte CSS : text-decoration et text-transform

Articles Liés

Voir plus