Rumah  >  Artikel  >  hujung hadapan web  >  Langkah untuk melaksanakan kesan menu tab lungsur pada bar navigasi responsif menggunakan CSS tulen

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

WBOY
WBOYasal
2023-10-28 09:58:491670semak imbas

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>

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

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

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>标签中,并使用<code>.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>

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Meneroka sifat hiasan teks CSS: hiasan teks dan transformasi teksArtikel seterusnya:Meneroka sifat hiasan teks CSS: hiasan teks dan transformasi teks

Artikel berkaitan

Lihat lagi