首页>>导航菜单>>多级侧边栏菜单，固定位置适用于后台(2018-11-13)

多级侧边栏菜单，固定位置适用于后台

多级侧边栏菜单，固定位置适用于后台
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. navBar(navOptions,'page5_2');  

 

JavaScript Code
  1. /** 
  2.  *  
  3.  * @authors Vict Chen (vict911@163.com) 
  4.  * @date    2017-09-14 
  5.  * @version navBar2.0.2 
  6.  */  
  7. /*配置showMore的展开动作*/  
  8. function navSwitch(id){  
  9.     if($("#"+id+" .secNavBar_ul").is(":visible")){  
  10.         $("#"+id+" .secNavBar_ul").stop().slideUp(100);  
  11.     }else{  
  12.         $(".navBar_ul li .secNavBar_ul").slideUp(100)  
  13.         $("#"+id+" .secNavBar_ul").stop().slideDown(100);  
  14.     }  
  15. }  
  16. /*未配置showMore的展开动作*/  
  17. function navSwitchShowmore(id){  
  18.     if($("#"+id+" .secNavBar_ul").is(":visible")){  
  19.         $("#"+id+" .secNavBar_ul").stop().slideUp(100);  
  20.         $("#"+id+" .showMore").removeClass("open");  
  21.     }else{  
  22.         $(".navBar_ul li .secNavBar_ul").slideUp(100);  
  23.         $(".navBar_ul li .showMore").removeClass("open");  
  24.         $("#"+id+" .secNavBar_ul").stop().slideDown(100);  
  25.         $("#"+id+" .showMore").addClass("open");  
  26.     }  
  27. }  
  28. (function(){  
  29.     var navBar = function(navContent,activePage){  
  30.         var fst = navContent.firstClass;//一级菜单对象  
  31.         var sty = navContent.styles;//navBar的样式对象  
  32.         var fstNavLength = fst.length;//一级菜单的数量  
  33.         /*创建nav容器*/  
  34.         var navBody='<div class="navBarOut"><div class="navBar">'+  
  35.         '<a href="'+sty.logo.linkUrl+'" class="logo_area"><img src="'+sty.logo.imgUrl+'"></a>'+  
  36.         '<ul class="navBar_ul"></ul>'+  
  37.         '</div></div>'  
  38.         $("body").prepend(navBody);  
  39.         /*循环创建一级菜单*/  
  40.         for(var a=0;a<fstNavLength;a++){  
  41.             if(fst[a].hasScd==false){  
  42.                 //无二级菜单的一级菜单  
  43.                 $(".navBar_ul").append('<li id="'+fst[a].pageId+'"><a class="first_nav_name" href="'+fst[a].linkUrl+'"><span>'+fst[a].pageName+'</span></a></li>')  
  44.             }else{  
  45.                 //含二级菜单的一级菜单  
  46.                 /*配置了styles并且配置了showMore项*/  
  47.                 if(sty&&sty.showMore&&sty.showMore==true){  
  48.                     $(".navBar_ul").append('<li id="'+fst[a].pageId+'">'+  
  49.                         '<a class="first_nav_name"  onclick="navSwitchShowmore(''+fst[a].pageId+'')"><span>'+fst[a].pageName+'</span><img src="images/show-more.png" class="showMore"></a>'+  
  50.                     '<ul class="secNavBar_ul"></ul>'+  
  51.                     '</li>');  
  52.                 }else{  
  53.                 /*未配置styles或配置了styles但未配置showMore或showMore配置为false*/  
  54.                     $(".navBar_ul").append('<li id="'+fst[a].pageId+'">'+  
  55.                         '<a class="first_nav_name"  onclick="navSwitch(''+fst[a].pageId+'')"><span>'+fst[a].pageName+'</span></a>'+  
  56.                     '<ul class="secNavBar_ul"></ul>'+  
  57.                     '</li>');  
  58.                 }  
  59.                 /*循环创建二级菜单*/  
  60.                 var scd = fst[a].secondClass;//(某一级菜单下)二级菜单对象  
  61.                 var scdNavLength = scd.length;//(某一级菜单下)二级菜单对象的个数  
  62.                 for(var b=0;b<scdNavLength;b++){  
  63.                     $("#"+fst[a].pageId+" .secNavBar_ul").append('<li><a id="'+scd[b].pageId+'" class="second_nav_name" href="'+scd[b].linkUrl+'">'+scd[b].pageName+'</a></li>');  
  64.                 }  
  65.             }  
  66.         }  
  67.         $(".navBar_ul").css('height',(window.innerHeight-50)+'px')//初始化导航高度  
  68.         $(window).resize(function(){  
  69.             $(".navBar_ul").css('height',(window.innerHeight-50)+'px')//初始化导航高度  
  70.         });  
  71.         $("#"+activePage).addClass("active");  
  72.         $("#"+activePage).parents(".secNavBar_ul").show();  
  73.         $("#"+activePage).parents("li").find(".showMore").addClass("open");  
  74.     }  
  75.     window.navBar = navBar;  
  76. })();  

 


原文地址:http://www.freejs.net/article_daohangcaidan_723.html