實例講解純css怎麼實現二級選單-前端問答-PHP中文網

首頁

web前端

前端問答

實例講解純css怎麼實現二級選單

PHPz

Apr 07, 2023 pm 04:57 PM

隨著網站越來越複雜，導覽列也變得越來越重要。而二級選單是一種常見的導覽列設計，可以為使用者提供更多的選擇，增加網站的可用性和適應性。因此，在建立網站的過程中，實現簡單易用的二級選單是不可或缺的。在這篇文章中，我們將學習如何使用CSS實現二級選單。

HTML結構設計

首先，我們需要在HTML中設定好導覽列的結構，這對於CSS的實作非常重要。

一個簡單的導覽列的HTML結構如下：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

登入後複製

這個結構包含一個nav元素和一個ul元素。 nav元素包覆著完整的導覽欄，而ul元素包含導覽列的每個單獨的鏈接，以及包含二級選單的連結。

注意到第二個li元素包含一個ul元素，這個元素就是二級選單的容器。我們將在下面的步驟中為這個容器添加樣式。

CSS樣式設計

接下來，我們需要為這個導覽列設定CSS樣式，以實現二級選單。在下面的程式碼中，我們會先去掉預設樣式，並為所有連結設定以下樣式：

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

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

登入後複製

這塊程式碼包含了以下幾個部分：

我們先去掉了預設的樣式，並設定了所有連結的基本樣式。
接下來，我們為所有的li元素設定position: relative;，以便相對於它的子元素定位。這意味著我們可以透過子元素來實現其定位。
每個二級選單用一個單獨的ul元素來包含，我們為這些ul元素設定了一些基本的樣式，例如定位以及不可見。
最後，我們加入了滑鼠懸浮的效果。當滑鼠懸浮在一個li元素上，我們會將其子元素的可見度變更為可見。當滑鼠懸浮在二級選單上時，我們將其自身和其子元素的可見度變更為可見。也就是說，無論何時滑鼠懸浮在導覽列上，所有二級選單都會以顯示狀態呈現。

完整程式碼範例

最終，我們的完整的HTML和CSS程式碼將如下所示：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

登入後複製

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

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

登入後複製