日韩欧美在线观看一区,亚洲人成精品久久久久,色综合视频一区二区三区44rt

技術(shù)頻道 - html技術(shù)

jQuery黑色左側(cè)邊導(dǎo)航菜單(可折疊可縮進(jìn)滑出)

作者:admin 時間:2023-5-12 19:10:28 瀏覽:

前面介紹過一款layui框架實現(xiàn)的可折疊側(cè)欄導(dǎo)航菜單，本文介紹的側(cè)欄導(dǎo)航可以說是前面介紹的升級，因為它多了一些特色，比如增加了圖標(biāo)字體，畫面觀感更好了，此外，最主要的是它還可以縮進(jìn)滑出。

效果圖

jQuery黑色左側(cè)邊導(dǎo)航菜單(可折疊可縮進(jìn)滑出)

demo download

示例介紹

本示例由CSS3+jQuery實現(xiàn)，另外用到了圖標(biāo)字體iconfont。

點擊主菜單時，打開或折疊二級菜單。
打開二級菜單時，其父菜單項右邊的小箭頭由向右轉(zhuǎn)為向下。
關(guān)閉二級菜單時，其父菜單項右邊的小箭頭由向下轉(zhuǎn)為向右。
點擊左上角四橫圖標(biāo)，導(dǎo)航菜單會縮向左側(cè)（最后只顯示各菜單項的圖標(biāo)）或從左側(cè)滑出。
菜單消失后，鼠標(biāo)移到圖標(biāo)上時，其右邊顯示該菜單項的二級菜單。

HTML代碼

下面是示例的HTML代碼結(jié)構(gòu)。

<div class="nav">
  <div class="nav-top">
    <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="statics/images/mini.png"></div>
  </div>
  <ul>
    <li class="nav-item"> <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>網(wǎng)站配置</span><i class="my-icon nav-more"></i></a>
      <ul>
        <li><a href="javascript:;"><span>網(wǎng)站設(shè)置</span></a></li>
        <li><a href="javascript:;"><span>友情鏈接</span></a></li>
        <li><a href="javascript:;"><span>分類管理</span></a></li>
        <li><a href="javascript:;"><span>系統(tǒng)日志</span></a></li>
      </ul>
    </li>
    <li class="nav-item"> <a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i class="my-icon nav-more"></i></a>
      <ul>
        <li><a href="javascript:;"><span>站內(nèi)新聞</span></a></li>
        <li><a href="javascript:;"><span>站內(nèi)公告</span></a></li>
        <li><a href="javascript:;"><span>登錄日志</span></a></li>
      </ul>
    </li>
    <li class="nav-item"> <a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>訂單管理</span><i class="my-icon nav-more"></i></a>
      <ul>
        <li><a href="javascript:;"><span>訂單列表</span></a></li>
        <li><a href="javascript:;"><span>打個醬油</span></a></li>
        <li><a href="javascript:;"><span>也打醬油</span></a></li>
      </ul>
    </li>
  </ul>
</div>

div標(biāo)簽是導(dǎo)航的盒子，div里面第一層ul標(biāo)簽是導(dǎo)航菜單的容器，其子元素li標(biāo)簽是主菜單項目列舉。

每個主菜單項目的li標(biāo)簽，里面都可以嵌入一個ul標(biāo)簽，這是一個二級菜單的容器，而這個ul標(biāo)簽里的li元素，就是二級菜單列舉項。

CSS

本示例導(dǎo)航的CSS樣式代碼不多，下面分析下主要的樣式。

.nav 設(shè)置導(dǎo)航盒子的寬度、高度、背景等樣式。

.nav {
  width: 220px;
  height: 100%;
  background: #263238;
  transition: all .3s;
}

這里用了一個transition屬性，其值是 all .3s; 。transition 屬性用于在特定時間段內(nèi)改變 CSS 屬性的值，例如寬度、高度、不透明度和變換。參閱 css transition 屬性。

.nav-item 設(shè)置導(dǎo)航主菜單項的位置等樣式。

.nav-item {
  position: relative;
}
li {
  list-style: none;
}

菜單名稱前面的i標(biāo)簽，是一個圖標(biāo)字體的標(biāo)簽，其屬性值為 my-icon nav-icon icon_1 。

.icon_1::after 是圖標(biāo)字體的偽元素。

.nav-icon 設(shè)置位置等樣式。

.my-icon 設(shè)置字體樣式。

.icon_1::after {
  content: "\e62b";
}
.nav .nav-icon {
  font-size: 20px;
  position: absolute;
  margin-left: -1px;
}
.my-icon {
  font-family: "my-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

本示例CSS代碼比較簡單易懂，不過需要引用iconfont圖標(biāo)字體。

<link rel="stylesheet" type="text/css" href="statics/font/iconfont.css">

iconfont圖標(biāo)字體有一些關(guān)聯(lián)文件。

請放心，這些文件都在源碼包里，示例引用的文件都是本地的而不是使用公共庫文件。

你可能需要在你的web服務(wù)器進(jìn)行相關(guān)配置，以支持該圖標(biāo)字體?？蓞㈤單覍懙膸灼恼?。

JavaScript

本示例需要使用jQuery編程，以實現(xiàn)鼠標(biāo)點擊事件的交互功能。

$(function(){
    // nav收縮展開
    $('.nav-item>a').on('click',function(){
        if (!$('.nav').hasClass('nav-mini')) {
            if ($(this).next().css('display') == "none") {
                //展開未展開
                $('.nav-item').children('ul').slideUp(300);
                $(this).next('ul').slideDown(300);
                $(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
            }else{
                //收縮已展開
                $(this).next('ul').slideUp(300);
                $('.nav-item.nav-show').removeClass('nav-show');
            }
        }
    });
    //nav-mini切換
    $('#mini').on('click',function(){
        if (!$('.nav').hasClass('nav-mini')) {
            $('.nav-item.nav-show').removeClass('nav-show');
            $('.nav-item').children('ul').removeAttr('style');
            $('.nav').addClass('nav-mini');
        }else{
            $('.nav').removeClass('nav-mini');
        }
    });
});