純CSS實現下拉菜單導航

wapeyang 發布于2019-08-01 15:20 / 3600人閱讀

摘要：需求當鼠標到按鈕上時，出現下拉菜單導航條。設置是，默認寬度為內容寬度，則鼠標只會在到按鈕區域時才會展開下拉菜單以上是我的一些想法以及實現，如有錯誤之處，歡迎各位前端大神留言評論拍磚。

前言：本題是網易云課堂的前端微專業《頁面制作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有回響，在學校圖書館花了幾個小時做出來并對相關知識點進行了總結，寫了這篇博文。好，進入正題。

1.需求：當鼠標hover到按鈕上時，出現下拉菜單導航條。

2.HTML結構


    按鈕
        
            下拉菜單項
            下拉菜單項
            下拉菜單項
            下拉菜單項

3.設置樣式

（1）首先重置默認的

,標簽樣式

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

（2）設置按鈕的邊框等，此時我設置的是外層

標簽中標簽的樣式，此時將內層標簽設置成塊級block，這樣可以設置寬高，并且后面有用（后面再說）。

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

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

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

（4）為下拉菜單項添加樣式

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

（5）不能忘了最后一個

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

（6）設置鼠標hover時出現下拉菜單

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

（7）設置hover時改變背景顏色

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

（8）此時會有一個小bug，鼠標hover到按鈕整一行時都會出現下拉菜單，因為此時最外層的

標簽是塊級元素，塊級元素沒有設置寬度默認的寬度是父元素寬度，而它的父元素是body，第（6）步寫的是hover整個外層

標簽，所以會出現這種情況。

解決辦法：可以在父元素

設置inline－block，子元素設置block，當子元素內容超出時，父元素寬度根據內容變化，所以，可以將按鈕hover區域控制按鈕邊框之內。

    .btn{
        display: inline-block; /*設置btn是inline－block，
        默認寬度為內容寬度，則鼠標只會在hover到按鈕區域時才會展開下拉菜單*/
    }

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

以下是完整代碼：





    
    純css實現下拉菜單
    



    按鈕
        
            下拉菜單項
            下拉菜單項
            下拉菜單項
            下拉菜單項

GPU云服務器云服務器 div+css導航菜單 html實現下拉菜單純CSS 下拉導航

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

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

純CSS實現下拉菜單導航

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

bingo 2019-08-29 10:54 評論0 收藏0
純CSS打造淘寶導航菜單欄

摘要：店鋪裝修端基礎頁首頁裝修頁面編輯菜單模塊顯示設置，粘貼如下導航條背景色首頁店鋪動態背景色微軟雅黑黑體首頁店鋪動態右邊線首頁店鋪動態文字顏色下拉菜單圖標店鋪裝修-PC端-基礎頁-首頁-裝修頁面：編輯“菜單”模塊-顯示設置，粘貼如下CSS： /* 導航條背景色*/ .skin-box-bd .menu-list{background: none repeat scrol...

番茄西紅柿 2019-04-23 13:39 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現了寬度，高度圓點大小直徑的控件。未完待續背景如今css3越來越發達，focus-within等屬性也已經開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優秀的框架。通過對css3的實踐，我發現自定義原生控件并不是什么難事，...

BigTomato 2019-08-29 15:17 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現了寬度，高度圓點大小直徑的控件。未完待續背景如今css3越來越發達，focus-within等屬性也已經開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優秀的框架。通過對css3的實踐，我發現自定義原生控件并不是什么難事，...

lanffy 2019-08-26 17:29 評論0 收藏0