CSS 菜单(有子菜单/子分类)显示图标,没有不显示

老白 5个月前 217浏览 0评论

选单常见于我们的生活当中,通常用于整理一系列的指令,简化複杂的程序,使介面看起来更加友善。当应用程式愈複杂,功能愈多时,通常会利用多级选单将类似的指令组织成一个子选单。

一般网页常见到二级选单,利用 CSS 即可达成,有些会透过 JavaScript 增加更多效果,例如动画、延迟等。多级选单一般常使用 JavaScript 达成,不过透过 CSS 也能做出简单的多级选单。

###HTML

<nav>
  <ul>
    <li><a href="">選單 1</a></li>
    <li>
      <a href="">選單 2</a>
      <ul>
        <li>
          <a href="">選單 2-1</a>
          <ul>
            <li><a href="">選單 2-1-1</a></li>
            <li><a href="">選單 2-1-2</a></li>
          </ul>
        </li>
        <li><a href="">選單 2-2</a></li>
        <li><a href="">選單 2-3</a></li>
      </ul>
    </li>
    <li><a href="">選單 3</a></li>
    <li><a href="">選單 4</a></li>
  </ul>
</nav>

選單的 HTML 如上,所有的選單物件都是可點選的連結,理論上無限層級。

###CSS

ul li {
  position: relative; /* 使子選單依照母選單的座標顯示 */
}
/* 設定母選單的連結樣式 */
ul li a{
  background: url(detail.png);
}
/* 當母選單下沒有子選單時,也就是說只有一個連結時,隱藏detail.png */
ul li a:only-child{
  background: none;
}
ul li:hover > ul {
  display: block; /* 滑鼠滑入母選單後,顯示子選單 */
}
/* 二級選單顯示於一級選單的正下方 */
ul ul {
  position: absolute;
  top: 100%;
  list-style: none;
  display: none;
}
/* 三級選單則顯示於二級選單的右方 */
ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

这洋就完成了所有步骤,不需要繁复的 JavaScript,是不是很间单呢?

範例下載

##后记

发表评论