css實現二級菜單

很少廢話，先上預覽
https://codepen.io/Ritr/pen/W...
這一次仍是使用<input type="checkbox">的選中與否來實現展開、收起二級菜單的。

第一步：初始化

默認二級菜單的li高度爲0

選擇一級菜單時，將二級菜單高度設置爲20px

這樣設置是爲了方便咱們之後添加動畫效果

html

<ul class="menu">
    <li class="main-menu">
      <label for="ck1">
          <span>水果</span>    
      </label>
      <input id="ck1" type="checkbox">
      <ul class="sub-menu-container">
        <li class="sub-menu">橘子</li>
        <li class="sub-menu">香蕉</li>
        <li class="sub-menu">蘋果</li>
      </ul>
    </li>
    <li class="main-menu">
      <label for="ck2">
          <span>水果</span>    
      </label>
      <input id="ck2" type="checkbox" checked>
      <ul class="sub-menu-container">
        <li class="sub-menu checked">橘子</li>
        <li class="sub-menu checked">香蕉</li>
        <li class="sub-menu checked">蘋果</li>
      </ul>
    </li>
  </ul>

css

/* 初始化 */
*{
  margin:0;
  padding:0
}
.container{
  width:500px;
  margin:0 auto;
  text-align:center;
}
.menu{
  width:200px;
  display:inline-block;
}
li{
  list-style:none;
  cursor:pointer;
  text-align:left;
  text-indent:5px;
}
.main-menu{
  background:#0099CC;
  margin:1px 0;
}
.sub-menu{
  background:#00CCFF;
  margin:1px 0;
  overflow:hidden;
  height:0;
}
.sub-menu.checked{
  height:20px;
}

效果圖

第二步：選中checkbox時展開二級菜單，取消選擇時收起二級菜單

劃重點--注意label和input之間的位置
html

<ul class="menu">
    <li class="main-menu">
      <label for="ck3">
          <span>水果</span>    
      </label>
      <input id="ck3" class="ck" type="checkbox">
      <ul class="sub-menu-container">
        <li class="sub-menu">橘子</li>
        <li class="sub-menu">香蕉</li>
        <li class="sub-menu">蘋果</li>
      </ul>
    </li>
    <li class="main-menu">
      <label for="ck4">
          <span>水果</span>    
      </label>
      <input id="ck4" class="ck" type="checkbox" checked>
      <ul class="sub-menu-container">
        <li class="sub-menu">橘子</li>
        <li class="sub-menu">香蕉</li>
        <li class="sub-menu">蘋果</li>
      </ul>
    </li>
  </ul>

css

/* 第二步 */
.ck:checked + .sub-menu-container .sub-menu{
  height:20px;
}

效果圖

看起來跟第一步沒什麼變化

第三步優化

將label設置成和一級菜單一樣大小，隱藏checkbox，添加動畫
html

<ul class="menu">
    <li class="main-menu">
      <label for="ck5" class="menu-label">
          <span>水果</span>    
      </label>
      <input id="ck5" class="ck-finished" type="checkbox">
      <ul class="sub-menu-container">
        <li class="sub-menu-finished">橘子</li>
        <li class="sub-menu-finished">香蕉</li>
        <li class="sub-menu-finished">蘋果</li>
      </ul>
    </li>
  </ul>

css

.menu-label{
  display:inline-block;
  width:100%;
  cursor:pointer;
}


/* 隱藏checkbox */
.ck-finished{
  display:none;
}
.ck-finished:checked + .sub-menu-container .sub-menu-finished{
  height:20px;
}
.sub-menu-finished{
  background:#00CCFF;
  margin:1px 0;
  overflow:hidden;
  height:0;
  transition:all 0.4s;/* 添加動畫 */
}

效果圖

哈哈，變化不大。仍是須要你點擊預覽一下的。另外怎麼上次gif圖？大佬告訴我一下吧。