Langkah untuk melaksanakan kesan menu tab lungsur pada bar navigasi responsif menggunakan CSS tulen-tutorial css-php.cn

Langkah untuk melaksanakan kesan menu tab lungsur pada bar navigasi responsif menggunakan CSS tulen

WBOY

Lepaskan： 2023-10-28 09:58:49

asal

1723 orang telah melayarinya

Langkah untuk melaksanakan kesan menu tab lungsur pada bar navigasi responsif menggunakan CSS tulen

Langkah untuk melaksanakan kesan menu tab lungsur dari bar navigasi responsif menggunakan CSS tulen

Bar navigasi ialah salah satu elemen biasa dalam halaman web dan menu tab lungsur ialah kesan yang sering digunakan dalam bar navigasi. Boleh menyediakan lebih banyak pilihan navigasi. Artikel ini akan memperkenalkan cara menggunakan CSS tulen untuk melaksanakan kesan menu tab lungsur turun bar navigasi responsif.

Langkah 1: Bina struktur HTML asas

Kita perlu membina struktur HTML asas untuk demonstrasi dan menambah beberapa gaya pada bar navigasi. Berikut ialah struktur HTML ringkas:

<!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>

Salin selepas log masuk

Langkah 2: Tambah gaya CSS

Seterusnya, kita perlu menambah beberapa gaya CSS untuk mencapai kesan bar navigasi responsif. Kami boleh menggunakan pertanyaan media untuk menentukan gaya untuk saiz skrin yang berbeza. Berikut ialah gaya CSS contoh:

/* 全局样式 */
* {
  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;
  }
}

Salin selepas log masuk

Langkah 3: Tambah kod JavaScript

Dalam merealisasikan kesan bar navigasi responsif, kita juga perlu menggunakan JavaScript untuk mengawal pengembangan dan keruntuhan menu. Berikut ialah contoh kod JavaScript yang mudah:

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

Salin selepas log masuk

Langkah 4: Tambahkan kandungan menu lungsur

Akhir sekali, kita perlu menambah kandungan menu lungsur ke bar navigasi. Bahagian kandungan ini akan diletakkan dalam kelas <div>标签中，并使用.navbar-dropdown untuk kawalan gaya. Berikut ialah contoh:

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

Salin selepas log masuk

Ringkasnya, melalui empat langkah di atas, kita boleh mencapai kesan menu tab lungsur turun bar navigasi responsif CSS tulen. Menggunakan pertanyaan media dan JavaScript, kami boleh memaparkan dan menyembunyikan kandungan dalam saiz skrin yang berbeza untuk memberikan pengguna pengalaman yang lebih baik.

Atas ialah kandungan terperinci Langkah untuk melaksanakan kesan menu tab lungsur pada bar navigasi responsif menggunakan CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!