前端入門教程——純css制作二級菜單

freecode 發布于2019-08-29 12:18 / 3091人閱讀

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

首先，需要聲明的是本教程是寫給初級者參考的，如果您已經有一定的基礎請直接忽略吧

二級菜單是網站開發中很常見的功能模塊，但是對于初級者來說卻還是有些困難，下面我就拿幾個常見的案例來講好了。

鼠標滑過顯示顯示二級菜單

很簡單，li標簽嵌套一層ul

/*設置一級菜單樣式*/

.navs:after{
    position: relative;
    content: "";
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
    zoom: 1;
}

.nav {
    position: relative;
    float: left;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.nav-a {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    color: #d8ac00;
}

效果如下：

接著設置二級菜單

/*設置二級樣式*/

.sub-navs {
    /*使用絕對定位，在文檔流中不占位，免得影響后面的布局*/
    /*注意，因為這里使用了絕對定位，所以它的父元素.nav記得使用相對定位*/
    position: absolute;
    top: 100%;
    width: 100%;
    display: none;
    /*先隱藏起來*/
}

.nav:hover .sub-navs {
    /*鼠標滑過時顯示二級菜單*/
    display: block;
}

.sub-nav-a {
    font-size: 12px;
    color: #000; 
}

這時候簡單的二級菜單效果就出來了。如果想要劃過的時候，一級菜單背景變黃，字體變白呢

.nav:hover .nav-a {
    background-color: #d8ac00;
    color: #fff;
}

添加這行就好了。
但是我們的效果圖還加了邊框，各位看官可能覺得很簡單啊，加上border屬性不就就好了

.nav:hover .nav-a,
.sub-nav{
    border: 1px solid #ccc;
}

結果邊框重疊了：

我們發現，其實二級菜單把border-top去掉就可以了

.sub-nav{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

還有一個問題時，當鼠標滑動到左邊第一個一級菜單的時候，右邊的一級菜單出現了閃動現象，體驗十分不友好，加上border-box屬性就可以解決此問題

.nav-a {
    box-sizing: border-box;
}

參考代碼：http://runjs.cn/detail/ep0eq85c

關注作者吧~

GPU云服務器云服務器純CSS 二級菜單 div+css導航菜單二級導航菜單

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

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

前端入門教程——純css制作二級菜單

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

vslam 2019-08-01 16:35 評論0 收藏0
前端小白進階筆記之多級菜單分享

摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會繼承父元素的樣式在寫樣式是我們會發現子元素會繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對象一個或者單獨設置其屬性相對定位絕對定位的用法。 css技術分享之二級、三級下拉菜單的制作：首先看一下網頁中的三級下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...

Wuv1Up 2019-08-01 17:40 評論0 收藏0
前端小白進階筆記之多級菜單分享

摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會繼承父元素的樣式在寫樣式是我們會發現子元素會繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對象一個或者單獨設置其屬性相對定位絕對定位的用法。 css技術分享之二級、三級下拉菜單的制作：首先看一下網頁中的三級下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...

Mike617 2019-08-29 13:30 評論0 收藏0
純CSS實現下拉菜單導航

摘要：需求當鼠標到按鈕上時，出現下拉菜單導航條。設置是，默認寬度為內容寬度，則鼠標只會在到按鈕區域時才會展開下拉菜單以上是我的一些想法以及實現，如有錯誤之處，歡迎各位前端大神留言評論拍磚。前言：本題是網易云課堂的前端微專業《頁面制作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有回響，在學校圖書館花了幾個小時做出來并對相關知識點進行了總結，寫了這篇博文...

wapeyang 2019-08-01 15:20 評論0 收藏0
純CSS實現下拉菜單導航

摘要：需求當鼠標到按鈕上時，出現下拉菜單導航條。設置是，默認寬度為內容寬度，則鼠標只會在到按鈕區域時才會展開下拉菜單以上是我的一些想法以及實現，如有錯誤之處，歡迎各位前端大神留言評論拍磚。前言：本題是網易云課堂的前端微專業《頁面制作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有回響，在學校圖書館花了幾個小時做出來并對相關知識點進行了總結，寫了這篇博文...

bingo 2019-08-29 10:54 評論0 收藏0