本文將為大家詳細(xì)介紹“CSS3二級(jí)導(dǎo)航菜單怎么弄”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“CSS3二級(jí)導(dǎo)航菜單怎么弄”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供臨海企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為臨海眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

css是什么意思

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

如果想要實(shí)現(xiàn)網(wǎng)頁(yè)的二級(jí)導(dǎo)航，我們可以使用JS技術(shù)，動(dòng)態(tài)的顯示和隱藏二級(jí)菜單，當(dāng)然也可以使用CSS技術(shù)來(lái)實(shí)現(xiàn)。并且這里推薦使用CSS，因?yàn)槠湫矢?，更流暢。這里將介紹二級(jí)菜單的動(dòng)態(tài)顯示與隱藏。

1 結(jié)構(gòu)

一般導(dǎo)航的主體我們主要是使用ul li標(biāo)簽

2 布局

導(dǎo)航的布局，由于子元素要隨著父元素，所以對(duì)二級(jí)菜單選取定位布局。要想讓多個(gè)li在一行中顯示，那么就需要讓li進(jìn)行浮動(dòng)。

    body{margin: 0; font-size: 14px; color: #666}
        ul,ol{margin: 0;padding: 0; list-style: none;}
        a {text-decoration: none; color: #666;}
        /*一級(jí)導(dǎo)航*/
        /*背景色*/
        ul.menu,ul.submenu {
            background-color: #ededed;
        }
        /*一級(jí)導(dǎo)航浮動(dòng)*/
        ul.menu::after {
            content: '';
            display: block;
            clear: both;
        }
        ul.menu > li {
            float: left;
            width: 120px;
            line-height: 3em;
            height: 3em;
            text-align: center;
            cursor:pointer;
        }
    
        /*二級(jí)導(dǎo)航項(xiàng)分割線*/
        ul.submenu {
            /*默認(rèn)隱藏*/
            display: none;
        }
        ul.submenu > li {
            border-bottom: 1px solid #fff;
        }
        
        /*內(nèi)容區(qū)*/
        .content {
            min-height: 800px;
            background-color: #fff;
        }

3. 二級(jí)菜單顯示特效

光標(biāo)放到導(dǎo)航上，當(dāng)前元素背景色變深，字體顏色變淡。

如果有二級(jí)菜單，顯示二級(jí)菜單

為了實(shí)現(xiàn)上述兩個(gè)特效，我們可以利用偽類選擇器（:hover）來(lái)捕捉光標(biāo)懸浮的操作。并且使用偽類選擇器（:hover）來(lái)選擇到當(dāng)前菜單對(duì)應(yīng)的二級(jí)菜單

利用如下CSS可以快速實(shí)現(xiàn)該特效。

        /*選中特效*/
        ul.menu > li:hover {
            background-color: #666;
        }
        ul.menu > li:hover > a {
            color: #fff;
        }
        ul.menu > li:hover > ul.submenu {
            display: block;
        }

4. 動(dòng)畫(huà)

上述代碼中二級(jí)菜單的顯示是瞬間的。能否提供一個(gè)緩慢動(dòng)畫(huà)過(guò)渡的效果，當(dāng)然也是沒(méi)問(wèn)題。這里需要使用animation來(lái)進(jìn)行動(dòng)畫(huà)的配置，那么動(dòng)畫(huà)幀可以自己寫(xiě)或者是尋求第三方代碼庫(kù)（animate.css）的支持。這里我將使用透明度來(lái)實(shí)現(xiàn)這個(gè)淡入效果

        /*動(dòng)畫(huà)幀*/
        @keyframes fade {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        /*基礎(chǔ)動(dòng)畫(huà)樣式*/
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }
        .fadeIn {
            animation-name: fade;
            animation-direction: normal;
        }

動(dòng)畫(huà)定義好后，可以直接將動(dòng)畫(huà)樣式引用到ul.submenu上，注意，如果使用的是animate.css，那么上述步驟將省略，直接用其提供好的動(dòng)畫(huà)樣式即可。

        
        
            
小程序
            
微信
            
企業(yè)站
        
        

如果你能讀到這里，小編希望你對(duì)“CSS3二級(jí)導(dǎo)航菜單怎么弄”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！