技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

漂亮的左側(cè)二級(jí)導(dǎo)航菜單(伸縮式)【演示/源碼下載】

作者:admin    時(shí)間:2022-3-3 18:27:12    瀏覽:

本文介紹一個(gè)伸縮式的左側(cè)二級(jí)導(dǎo)航菜單設(shè)計(jì)。默認(rèn)顯示一級(jí)菜單，點(diǎn)擊菜單時(shí)顯示其子菜單。

左側(cè)二級(jí)導(dǎo)航菜單設(shè)計(jì)(伸縮式)

demodownload

本菜單使用了CSS3+jQuery來(lái)實(shí)現(xiàn)。

HTML

<div class="sidebar-menu">
    <input type="checkbox" name="menu-first-group" id="menu-first-group">
    <ul class="menu-first">
        <label for="menu-first-1" id="menu-first-1-label"><img src="1.png">一級(jí)菜單1</label>
        <label for="menu-first-2" id="menu-first-2-label"><img src="2.png">一級(jí)菜單2</label>
        <label for="menu-first-3" id="menu-first-3-label"><img src="3.png">一級(jí)菜單3</label>
        <label for="menu-first-4" id="menu-first-4-label"><img src="4.png">一級(jí)菜單4</label>
        <label for="menu-first-5" id="menu-first-5-label"><img src="5.png">一級(jí)菜單5</label>
    </ul>
    <div class="menu-second">
        <input type="checkbox" name="menu-first" id="menu-first-1" />
        <ul>
            <li class="menu-second-item"><a>子菜單1.1</a></li>
            <li class="menu-second-item"><a>子菜單1.2</a></li>
        </ul>
        <input type="checkbox" name="menu-first" id="menu-first-2" />
        <ul>
            <li class="menu-second-item"><a>子菜單2.1</a></li>
            <li class="menu-second-item"><a>子菜單2.2</a></li>
            <li class="menu-second-item"><a>子菜單2.3</a></li>
            <li class="menu-second-item"><a>子菜單2.4</a></li>
        </ul>
        <input type="checkbox" name="menu-first" id="menu-first-3" />
        <ul>
            <li class="menu-second-item"><a>子菜單3.1</a></li>
            <li class="menu-second-item"><a>子菜單3.2</a></li>
        </ul>
        <input type="checkbox" name="menu-first" id="menu-first-4" />
        <ul>
            <li class="menu-second-item"><a>子菜單4.1</a></li>
            <li class="menu-second-item"><a>子菜單4.2</a></li>
            <li class="menu-second-item"><a>子菜單4.3</a></li>
            <li class="menu-second-item"><a>子菜單4.4</a></li>
            <li class="menu-second-item"><a>子菜單4.5</a></li>
            <li class="menu-second-item"><a>子菜單4.6</a></li>
        </ul>
        <input type="checkbox" name="menu-first" id="menu-first-5" />
        <ul>
            <li class="menu-second-item"><a>子菜單5.1</a></li>
            <li class="menu-second-item"><a>子菜單5.2</a></li>
            <li class="menu-second-item"><a>子菜單5.3</a></li>
        </ul>
    </div>
</div>

菜單盒子（導(dǎo)航區(qū)域）是一個(gè)DIV，其class值是sidebar-menu。

你會(huì)發(fā)現(xiàn)有很多個(gè)INPUT標(biāo)簽type=checkbox的復(fù)選框，這是顯示一級(jí)或其子菜單的判斷標(biāo)識(shí)。你還會(huì)發(fā)現(xiàn)每個(gè)INPUT標(biāo)簽后面都跟著一個(gè)UL容器，UL容器裝的是一級(jí)菜單或子菜單內(nèi)容。INPUT標(biāo)簽永遠(yuǎn)都是不可見的，其CSS屬性display:none，它的作用是，當(dāng)INPUT標(biāo)簽的checked屬性為true時(shí)，緊跟其后的UL容器便顯示出來(lái)，而其他的UL容器便隱藏起來(lái)，而顯示或隱藏是通過(guò)點(diǎn)擊菜單來(lái)觸發(fā)，通過(guò)Javascript編程來(lái)實(shí)現(xiàn)。

class值為menu-first的UL容器是一級(jí)菜單，class值是menu-second的UL容器是二級(jí)菜單。

一級(jí)菜單label標(biāo)簽的for屬性值比如menu-first-1，對(duì)應(yīng)二級(jí)菜單中INPUT標(biāo)簽的id值，通過(guò)該id值來(lái)關(guān)聯(lián)父子菜單。二級(jí)菜單里的INPUT標(biāo)簽，name屬性值都是menu-first。li列表標(biāo)簽的class值都是menu-second-item。

如何新增或減少菜單項(xiàng)目

二級(jí)菜單項(xiàng)的新增或減少非常簡(jiǎn)單，在實(shí)例HTML代碼里自己想要的位置新增或減少一個(gè)li標(biāo)簽即可。

一級(jí)菜單的項(xiàng)目標(biāo)簽是label，所以要減少一個(gè)一級(jí)菜單項(xiàng)目很簡(jiǎn)單，直接在實(shí)例HTML代碼里刪除一個(gè)label標(biāo)簽即可。

如果想新增一個(gè)一級(jí)菜單項(xiàng)目，你需要在合適的位置添加幾行HTML代碼。

1、添加一個(gè)label標(biāo)簽，這是一級(jí)菜單。

<label for="menu-first-1" id="menu-first-1-label"><img src="1.png">一級(jí)菜單1</label>
<label for="menu-first-2" id="menu-first-2-label"><img src="2.png">一級(jí)菜單2</label>
<label for="menu-first-3" id="menu-first-3-label"><img src="3.png">一級(jí)菜單3</label>
<label for="menu-first-4" id="menu-first-4-label"><img src="4.png">一級(jí)菜單4</label>
<label for="menu-first-5" id="menu-first-5-label"><img src="5.png">一級(jí)菜單5</label>
<!-- 下面一行為新增行，注意數(shù)字要遞增，這里是6 //-->
<label for="menu-first-6" id="menu-first-6-label"><img src="6.png">一級(jí)菜單6</label>

2、添加一個(gè)二級(jí)菜單INPUT標(biāo)簽和UL標(biāo)簽，這是其子菜單。

<input type="checkbox" name="menu-first" id="menu-first-5" />
<ul>
  <li class="menu-second-item"><a>子菜單5.1</a></li>
  <li class="menu-second-item"><a>子菜單5.2</a></li>
  <li class="menu-second-item"><a>子菜單5.3</a></li>
</ul>
<!-- 新增下面代碼，注意input的id值要跟新增的一級(jí)菜單的for屬性值一致  //-->
<input type="checkbox" name="menu-first" id="menu-first-6" />
<ul>
 <li class="menu-second-item"><a>子菜單6.1</a></li>
 <li class="menu-second-item"><a>子菜單6.2</a></li>
</ul>

3、新增CSS代碼

/*二級(jí)菜單項(xiàng)延遲翻轉(zhuǎn)*/
.menu-second > input:checked + ul > li:nth-child(1) {
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -ms-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
}
... ...
... ...
... ...
.menu-second > input:checked + ul > li:nth-child(5) {
    -webkit-transition-delay: 400ms;
    -moz-transition-delay: 400ms;
    -ms-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    transition-delay: 400ms;
}
<!-- 
  新增如下代碼，注意數(shù)字的遞增，
  這里是nth-child(6)， delay值是500ms
//-->
.menu-second > input:checked + ul > li:nth-child(6) {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

通過(guò)以上三處改動(dòng)，便可新增了一個(gè)一級(jí)菜單項(xiàng)了。

CSS

/*菜單導(dǎo)航區(qū)域*/
.sidebar-menu{
    width: 200px;
    height: 400px;
    display: inline-block;
    vertical-align: top;
}
.sidebar-menu input{
    display: none;
}

/*一級(jí)菜單組*/
.menu-first{
    width: 100%;
    height: 100%;
    background-color: #ddd;
    float: left;

    transition:width 0.6s;
    -moz-transition:width 0.6s;
    -webkit-transition:width 0.6s;
    -o-transition:width 0.6s;
}
.menu-first img{
    width: 40px;
    height: 40px;
    vertical-align: middle;
}
.menu-first > label{
    color: #000;
    background-color: #ddd;
    border-bottom: 1px solid #bbb;
    height:50px;
    line-height:50px;
    text-align: center;
    cursor: pointer;
    display: block;
    overflow: hidden;

    transition:background-color 0.6s;
    -moz-transition:background-color 0.6s;
    -webkit-transition:background-color 0.6s;
    -o-transition:background-color 0.6s;
    -ms-transition:background-color 0.6s;
}
.menu-first > label:hover{
    background-color: #bbb;
}
.menu-first-selected{
    background-color: #bbb !important;
}
/*一級(jí)菜單組縮進(jìn)*/
#menu-first-group:checked + ul{
    width: 25%;
}

/*二級(jí)菜單區(qū)域*/
.menu-second{
    vertical-align: top;
    height: 100%;
    background-color: #bbb;
    overflow: hidden;
}
/*二級(jí)菜單組*/
.menu-second > ul{
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -ms-perspective: 300px;
    -o-perspective: 300px;
    perspective: 300px;
}
/*二級(jí)菜單項(xiàng)*/
.menu-second > ul > li{
    height: 0px;
    opacity: 0;
    overflow: hidden;

    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);

    transition:opacity 1s,height 1s,transform ease-in-out 0.3s;
    -moz-transition:opacity 1s,height 1s,-moz-transform ease-in-out 0.3s;
    -webkit-transition:opacity 1s,height 1s,-webkit-transform ease-in-out 0.3s;
    -o-transition:opacity 1s,height 1s,-o-transform ease-in-out 0.3s;
    -ms-transition:opacity 1s,-ms-transform ease-in-out 0.3s;
}
.menu-second > input:checked + ul > li{
    height: 50px;
    opacity: 1;

    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

/*二級(jí)菜單項(xiàng)*/
.menu-second-item > a{
    color: #000;
    height:50px;
    line-height:50px;
    border-left: 0px solid #bbb;
    border-right: 0px solid #00cc66;

    background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#bbb), to(#00cc66));
    background:-moz-linear-gradient(left,#bbb,#00cc66);
    background:-ms-linear-gradient(left, #bbb,#00cc66);
    background: -o-linear-gradient(left, #bbb,#00cc66);

    font-size: 12px;
    text-align:center;
    display: block;

    transition:border 0.5s;
    -moz-transition:border 0.5s;
    -webkit-transition:border 0.5s;
    -o-transition:border 0.5s;
    -ms-transition:border 0.5s;
}
.menu-second-item > a:hover{ 
animation: hover-color 2s infinite;
}

@keyframes hover-color {
    0% {
        background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#bbb), to(#00cc00));
        background:-moz-linear-gradient(left,#bbb,#00cc00);
        background:-ms-linear-gradient(left, #bbb,#00cc00);
        background: -o-linear-gradient(left, #bbb,#00cc00);
    }
    50% {
        background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#bbb), to(#00cc99));
        background:-moz-linear-gradient(left,#bbb,#00cc99);
        background:-ms-linear-gradient(left, #bbb,#00cc99);
        background: -o-linear-gradient(left, #bbb,#00cc99);
    }
    100% {
        background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#bbb), to(#00cc00));
        background:-moz-linear-gradient(left,#bbb,#00cc00);
        background:-ms-linear-gradient(left, #bbb,#00cc00);
        background: -o-linear-gradient(left, #bbb,#00cc00);
    }
}


/*二級(jí)菜單項(xiàng)延遲翻轉(zhuǎn)*/
.menu-second > input:checked + ul > li:nth-child(1) {
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -ms-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
}
.menu-second > input:checked + ul > li:nth-child(2) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu-second > input:checked + ul > li:nth-child(3) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu-second > input:checked + ul > li:nth-child(4) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu-second > input:checked + ul > li:nth-child(5) {
    -webkit-transition-delay: 400ms;
    -moz-transition-delay: 400ms;
    -ms-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    transition-delay: 400ms;
}
.menu-second > input:checked + ul > li:nth-child(6) {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

.sidebar-menu{} 是菜單導(dǎo)航區(qū)域，設(shè)置區(qū)域的高和寬。

.menu-first{} 是一級(jí)菜單組，設(shè)置一級(jí)菜單組高、寬、背景顏色等屬性。.menu-first img{} 是設(shè)置一級(jí)菜單的圖片css屬性（高、寬等）。

 

#menu-first-group:checked + ul{} 設(shè)置一級(jí)菜單組縮進(jìn)的樣式(寬度)。

 

.menu-second{} 是設(shè)置二級(jí)菜單區(qū)域樣式（高度:100%、背景顏色等）。

.menu-second > ul{} 是設(shè)置二級(jí)菜單組樣式，這里設(shè)置了perspective屬性值。

perspective 屬性定義 3D 元素距視圖的距離，以像素計(jì)。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。
注釋：perspective 屬性只影響 3D 轉(zhuǎn)換元素。

.menu-second > ul > li{} 是設(shè)置二級(jí)菜單項(xiàng)的樣式。這里我們可以試一試改變transform和transition的屬性值，使用自己喜歡的過(guò)渡效果。

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

transition 用于設(shè)置四個(gè)過(guò)渡屬性：
transition-property
transition-duration
transition-timing-function
transition-delay
注釋：請(qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過(guò)渡效果。

Javascript

本實(shí)例用到少量的jQuery代碼。

在編寫jQuery程序前，需要引用jQuery庫(kù)文件。

<script src="jquery-3.2.1.min.js"></script>
$("input:checkbox[name=menu-first]").click(function() {});
$("input:checkbox[name=menu-first]").change(function()
{
    var flag = $(this).prop("checked");
    $("input:checkbox[name=menu-first]").prop("checked", false);
    $("#menu-first-group").prop("checked", flag);
    $(this).prop("checked", flag);
    if (!flag)
    {
        $(".menu-first label").removeClass("menu-first-selected");
    }
});
$(".menu-first label").click(function()
{
    $(".menu-first label").removeClass("menu-first-selected");
    $(this).addClass("menu-first-selected");
});
$(window).load(function()
{
    $("input:checkbox[name=menu-first]").prop("checked", false);
    $("#menu-first-group").prop("checked", true);
    $("#menu-first-2").prop("checked", true);
    $("#menu-first-2-label").addClass("menu-first-selected");
});

$(window).load(function(){...} 設(shè)置菜單初始狀態(tài)。

前面對(duì)HTML代碼的解釋中，說(shuō)到INPUT復(fù)選框checked屬性值（true或false）是顯示一級(jí)或子菜單的判斷標(biāo)識(shí)。

$("input:checkbox[name=menu-first]").prop("checked", false); 設(shè)置子菜單關(guān)聯(lián)的INPUT復(fù)選框checked屬性為false，意思是隱藏所有子菜單。

$("#menu-first-group").prop("checked", true); 設(shè)置一級(jí)菜單關(guān)聯(lián)的INPUT復(fù)選框checked屬性為true，意思是默認(rèn)顯示一級(jí)菜單。

您可能對(duì)以下文章也感興趣

標(biāo)簽: 菜單  導(dǎo)航菜單  導(dǎo)航欄  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */