css實現二級菜單

Jaden 發布于2019-08-30 11:23 / 3546人閱讀

摘要：不多廢話，先上預覽這一次還是使用的選中與否來實現展開收起二級菜單的。另外怎么上次圖大佬告訴我一下吧。

不多廢話，先上預覽
https://codepen.io/Ritr/pen/W...
這一次還是使用的選中與否來實現展開、收起二級菜單的。

第一步：初始化

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

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

這樣設置是為了方便我們以后添加動畫效果

html

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

css

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

效果圖

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

第三步優化

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

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圖？大佬告訴我一下吧。

云服務器 GPU云服務器二級菜單 div+css導航菜單二級導航菜單二級聯動菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114961.html

CSS學習筆記(九) 界面組件之導航菜單

摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結果會導致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下，由于列表（li）是塊級元素...

pingink 2019-08-28 18:03 評論0 收藏0
前端入門教程——純css制作二級菜單

摘要：首先，需要聲明的是本教程是寫給初級者參考的，如果您已經有一定的基礎請直接忽略吧二級菜單是網站開發中很常見的功能模塊，但是對于初級者來說卻還是有些困難，下面我就拿幾個常見的案例來講好了。首先，需要聲明的是本教程是寫給初級者參考的，如果您已經有一定的基礎請直接忽略吧二級菜單是網站開發中很常見的功能模塊，但是對于初級者來說卻還是有些困難，下面我就拿幾個常見的案例來講好了。鼠標滑過顯示顯...

freecode 2019-08-29 12:18 評論0 收藏0
前端入門教程——純css制作二級菜單

摘要：首先，需要聲明的是本教程是寫給初級者參考的，如果您已經有一定的基礎請直接忽略吧二級菜單是網站開發中很常見的功能模塊，但是對于初級者來說卻還是有些困難，下面我就拿幾個常見的案例來講好了。首先，需要聲明的是本教程是寫給初級者參考的，如果您已經有一定的基礎請直接忽略吧二級菜單是網站開發中很常見的功能模塊，但是對于初級者來說卻還是有些困難，下面我就拿幾個常見的案例來講好了。鼠標滑過顯示顯...

vslam 2019-08-01 16:35 評論0 收藏0
實現二級菜單的滑動出現與消失(解決dispaly與transition沖突問題)

摘要：解決與沖突的問題思路因為和有沖突只要就不起作用在開始變為然后設置為秒后在改變其他的如或等可以過渡的在最后用監聽一次過渡結束事件鏈接演示代碼如下實現二級菜單的滑動出現與消失加到屬性里加到屬性里這段用寫在的屬性上方便進行修改作解決transition與display沖突的問題思路: 因為transition和display有沖突,只要dispaly,transition就不起作用,在...

fnngj 2019-08-22 18:03 評論0 收藏0
Vue + Vue-router + Element-ui 搭建一個非常簡單的dashboard d

摘要：但是有邊框，不好看啊再次美化使用使用圖標庫安裝這里主要貼一下的改動，其他的代碼就不貼了看下效果圖標什么的都有了。另外文件需要加上看看效果點擊菜單，路徑跳轉，并且每次都是單獨去加載路由的文件。做完這個demo后，我體會到，Vue組件化，webpack, Vue-router等，并不是很難學習，你需要的只是拿起斧頭的勇氣在做demo的過程中，我遇到一個問題，就是vue-router懶加載...

Near_Li 2019-08-21 17:38 評論0 收藏0