成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

vslam / 2428人閱讀

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

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

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

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

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

/*設(shè)置一級菜單樣式*/

.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;
}

效果如下：

接著設(shè)置二級菜單

/*設(shè)置二級樣式*/

.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;
}

結(jié)果邊框重疊了：

我們發(fā)現(xiàn)，其實二級菜單把border-top去掉就可以了

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

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

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

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

關(guān)注作者吧~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/50618.html

相關(guān)文章

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

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

    freecode 評論0 收藏0

  • 前端小白進階筆記之多級菜單分享

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

    Wuv1Up 評論0 收藏0

  • 前端小白進階筆記之多級菜單分享

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

    Mike617 評論0 收藏0

  • 純CSS實現(xiàn)下拉菜單導航

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

    bingo 評論0 收藏0

  • 純CSS實現(xiàn)下拉菜單導航

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

    wapeyang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<