純CSS實(shí)現(xiàn)下拉菜單導(dǎo)航

bingo 發(fā)布于2019-08-29 10:54 / 809人閱讀

摘要：需求當(dāng)鼠標(biāo)到按鈕上時(shí)，出現(xiàn)下拉菜單導(dǎo)航條。設(shè)置是，默認(rèn)寬度為內(nèi)容寬度，則鼠標(biāo)只會(huì)在到按鈕區(qū)域時(shí)才會(huì)展開下拉菜單以上是我的一些想法以及實(shí)現(xiàn)，如有錯(cuò)誤之處，歡迎各位前端大神留言評(píng)論拍磚。

前言：本題是網(wǎng)易云課堂的前端微專業(yè)《頁面制作》課程的作業(yè)題，當(dāng)時(shí)對(duì)題意理解錯(cuò)誤沒有實(shí)現(xiàn)題目要求，成了心中永遠(yuǎn)的痛，所謂念念不忘必有回響，在學(xué)校圖書館花了幾個(gè)小時(shí)做出來并對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行了總結(jié)，寫了這篇博文。好，進(jìn)入正題。

1.需求：當(dāng)鼠標(biāo)hover到按鈕上時(shí)，出現(xiàn)下拉菜單導(dǎo)航條。

2.HTML結(jié)構(gòu)


    按鈕
        
            下拉菜單項(xiàng)
            下拉菜單項(xiàng)
            下拉菜單項(xiàng)
            下拉菜單項(xiàng)

3.設(shè)置樣式

（1）首先重置默認(rèn)的

,標(biāo)簽樣式

li,
li a {
    text-decoration: none;
    list-style-type: none;
    font-family: "宋體";
    font-size: 12px;
    color: #000;
}

（2）設(shè)置按鈕的邊框等，此時(shí)我設(shè)置的是外層

標(biāo)簽中標(biāo)簽的樣式，此時(shí)將內(nèi)層標(biāo)簽設(shè)置成塊級(jí)block，這樣可以設(shè)置寬高，并且后面有用（后面再說）。

   .btn1 {
        display: block;
        border: 1px solid #ffffd;
        width: 50px;
        height: 28px;
        text-align: center;
        line-height: 28px;
    }

（3）將下拉菜單隱藏設(shè)置成不可見

ul {
    margin-top: 1px;
    position: absolute; /*設(shè)置絕對(duì)定位*/
    left: -999em;   /*設(shè)置隱藏*/
    padding: 0;  /*離它的父元素的邊界為0，所以可以位于父元素的正下方*/
}

（4）為下拉菜單項(xiàng)添加樣式

ul li a {
    display: inline-block;  /*菜單項(xiàng)寬度未知，設(shè)置inline－block寬度為內(nèi)容寬度*/
    border-top: 1px solid #ffffd;
    border-left: 1px solid #ffffd;  /*這方法很笨，千萬別學(xué)我*/
    border-right: 1px solid #ffffd;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
}

（5）不能忘了最后一個(gè)

.last {
    border-bottom: 1px solid #ffffd;
}

（6）設(shè)置鼠標(biāo)hover時(shí)出現(xiàn)下拉菜單

.btn:hover ul {
    left: auto; /*默認(rèn)ul的padding為0，位于按鈕正下方*/
}

（7）設(shè)置hover時(shí)改變背景顏色

ul li a:hover {
    background-color: #ffffd;
}

（8）此時(shí)會(huì)有一個(gè)小bug，鼠標(biāo)hover到按鈕整一行時(shí)都會(huì)出現(xiàn)下拉菜單，因?yàn)榇藭r(shí)最外層的

標(biāo)簽是塊級(jí)元素，塊級(jí)元素沒有設(shè)置寬度默認(rèn)的寬度是父元素寬度，而它的父元素是body，第（6）步寫的是hover整個(gè)外層

標(biāo)簽，所以會(huì)出現(xiàn)這種情況。

解決辦法：可以在父元素

設(shè)置inline－block，子元素設(shè)置block，當(dāng)子元素內(nèi)容超出時(shí)，父元素寬度根據(jù)內(nèi)容變化，所以，可以將按鈕hover區(qū)域控制按鈕邊框之內(nèi)。

    .btn{
        display: inline-block; /*設(shè)置btn是inline－block，
        默認(rèn)寬度為內(nèi)容寬度，則鼠標(biāo)只會(huì)在hover到按鈕區(qū)域時(shí)才會(huì)展開下拉菜單*/
    }

以上是我的一些想法以及實(shí)現(xiàn)，如有錯(cuò)誤之處，歡迎各位前端大神留言評(píng)論拍磚。如果你有更好的做法也可以和我交流，我的代碼寫的有很多不足之處，希望多和各位交流提高，謝謝！！！

以下是完整代碼：





    
    純css實(shí)現(xiàn)下拉菜單
    



    按鈕
        
            下拉菜單項(xiàng)
            下拉菜單項(xiàng)
            下拉菜單項(xiàng)
            下拉菜單項(xiàng)