zoukankan      html  css  js  c++  java
  • css13---转载---只用css实现多级选单,下拉菜单

    選單常見於我們的生活當中,通常用於整理一系列的指令,簡化複雜的程序,使介面看起來更加友善。當應用程式愈複雜,功能愈多時,通常會利用多級選單將類似的指令組織成一個子選單。

    一般網頁常見到二級選單,利用 CSS 即可達成,有些會透過 JavaScript 增加更多效果,例如動畫、延遲等。多級選單一般常使用 JavaScript 達成,不過透過 CSS 也能做出簡單的多級選單。

    ###HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    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,是不是很簡單呢?

  • 相关阅读:
    HDU1029 Ignatius and the Princess IV
    UVA11039 Building designing【排序】
    UVA11039 Building designing【排序】
    POJ3278 HDU2717 Catch That Cow
    POJ3278 HDU2717 Catch That Cow
    POJ1338 Ugly Numbers(解法二)
    POJ1338 Ugly Numbers(解法二)
    UVA532 Dungeon Master
    UVA532 Dungeon Master
    POJ1915 Knight Moves
  • 原文地址:https://www.cnblogs.com/kaililikai/p/5790393.html
Copyright © 2011-2022 走看看