卡卡網(wǎng)

本文將要介紹的是一款具有伸縮過渡效果的二級導(dǎo)航菜單，該菜單使用純CSS實(shí)現(xiàn)，代碼較少，修改容易，如果你喜歡此菜單的效果，那么可以直接下載本實(shí)例修改使用，方便快捷。

demodownload

HTML

<div class="nav">
    <ul class="first">
        <li>一級菜單
            <ul class="second">
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
            </ul>
        </li>
        <li>二級菜單
            <ul class="second">
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
            </ul>
        </li>
        <li>三級菜單
            <ul class="second">
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
                <li>二級菜單</li>
            </ul>
        </li>
    </ul>
</div>
<div class="content"></div>

HTML使用一個DIV標(biāo)簽作為菜單盒子模型，其class值是nav。

菜單列表（一級和二級）均使用ul li標(biāo)簽，一級菜單ul的class值是first，二級菜單ul的class值是second。

CSS

.nav {
    width: 600px;
    height: 50px;
    margin: 100px auto;
    background-color: yellow;
}

.content {
    width: 600px;
    height: 250px;
    margin: -100px auto;
    background-color: red;
}

.nav .first>li {
    width: 200px;
    height: 50px;
    list-style: none;
    line-height: 50px;
    float: left;
    text-align: center;
}

.second li {
    list-style: none;
    background-color: pink;
    transform: rotateY(-90deg);
    transition-duration: 1s;
    opacity: 0;
    position: relative;
}

.first>li:hover .second li {
    transform: none;
    opacity: 1;
}

.second li:nth-child(1) {
    transition-delay: 0ms;
}

.second li:nth-child(2) {
    transition-delay: 100ms;
}

.second li:nth-child(3) {
    transition-delay: 200ms;
}

.second li:nth-child(4) {
    transition-delay: 300ms;
}

.second li:nth-child(5) {
    transition-delay: 400ms;
}

CSS代碼不多，并且也不難理解，.nav{}定義菜單的高、寬、背景顏色等屬性。

.nav .first>li{}定義一級菜單的高、寬、列表樣式、行高等屬性。

.second li{}定義二級菜單的列表樣式、背景顏色等屬性，這里定義了transform: rotateY(-90deg);的過渡動畫屬性，沿Y軸轉(zhuǎn)動90度，transition-duration: 1s;是定義動畫時間為1s。

nth-child(n) n的值是1-5，代表是5個二級菜單項(xiàng)。如果你有多于5個二級菜單項(xiàng)，則參考實(shí)例代碼增加相應(yīng)的nth-child(n)屬性，需要注意的是transition-delay是以100ms遞增的。

總結(jié)

本文介紹了純CSS實(shí)現(xiàn)二級導(dǎo)航菜單(具有伸縮過渡效果)，代碼精煉易理解易修改，如果喜歡該菜單，可以直接下載實(shí)例代碼修改使用。

您可能對以下文章也感興趣

• CSS實(shí)現(xiàn)Menu Toggle移動菜單切換按鈕(打開/關(guān)閉)
• 漂亮的左側(cè)二級導(dǎo)航菜單(伸縮式)【演示/源碼下載】
• CSS+JS：一款常見的簡單大方又實(shí)用的移動網(wǎng)頁(二級)菜單設(shè)計
• 3款有下橫線平滑過渡效果的導(dǎo)航欄菜單
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計
• 簡單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計

• CSS3實(shí)現(xiàn)的可縮進(jìn)的側(cè)欄導(dǎo)航菜單
• 漂亮的純CSS3水平導(dǎo)航菜單（有過渡動畫效果）
• 可以展開和閉合子菜單的CSS3垂直導(dǎo)航菜單
• 又一個隨內(nèi)容滾動而變化的側(cè)邊/左側(cè)目錄導(dǎo)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航
• 簡單卻實(shí)用的CSS水平和垂直導(dǎo)航欄【演示/源碼】
• CSS3+JQuery實(shí)現(xiàn)的三級下拉導(dǎo)航菜單

標(biāo)簽: 菜單  二級導(dǎo)航菜單  二級菜單  導(dǎo)航菜單  導(dǎo)航欄