Kesioncms(ASP)实现无限级导航菜单效果
一直以来使用kesioncms的时候,全站导航菜单我都是写死的(因为实在是不喜欢官方在后台提供的那个纯JS版顶部菜单,一来蜘蛛索引不了对SEO不好,二来看起来实在很蹩脚)今天刚好需要,自己撸了一个
查询语句
select id,foldername,tj from KS_Class where topflag=1 Order BY root,folderorder
循环体
<div class="i_nav"> [loop=1000] <a href="{$Field(id,GetInfoUrl,100,1)}" rel="{$Field(tj,Num,0,2)}">{$Field(foldername,Text,0,...,0,)}</a> [/loop] </div>
CSS
.i_nav{ width:1000px; margin:auto; } /*定义菜单*/ .i_nav .i_menu{ font-size:12px; height: 30px; line-height: 30px; } .i_nav .i_menu li { color: #fff; height: 30px; line-height: 30px; position: relative; float: left; width: 100px; white-space:nowrap; } .i_nav .i_menu li a { display: block; text-align:center; width: 100px; overflow:hidden; } .i_nav .i_menu li ul a{ text-align:left; } /*下拉菜单样式*/ .i_nav .i_sub_menu { position: absolute; width: 230px; display: none; z-index: 999; border:1px #6491d9 solid; background:#ebf9ff; text-align:left; } .i_nav .i_menu li .i_sub_menu li { font-size: 12px; position: relative; width: 230px; height: 30px; text-align:left; text-indent:10px; } .i_nav .i_menu li .i_sub_menu li a { width: 230px; display: block; height: 30px; } .i_nav .i_menu a:hover{ color: #fff; text-decoration:none; } .i_nav .i_menu li .i_sub_menu li a:hover,.i_nav .i_menu li .i_sub_menu li a.now { background-color: #2772f3; color: #fff; text-decoration:none; } .i_nav .i_menu li.now,.i_nav .i_menu li.current { background-color: #2772f3; color: #fff; } /*如果有下拉菜单添加的class*/ .i_nav .hasmenu { } /*主导航箭头向下*/ .i_nav .i_menu li a.hasmenu { } /*下拉菜单箭头向右*/ .i_nav .i_menu li .i_sub_menu li a.hasmenu { } .i_nav .i_menu li .i_sub_menu li a.hasmenu:hover { color: #fff; }
JQ
<script type="text/javascript"> $(function(){ //遍历后拼接菜单 var navcode='',classname='',pretj=0,thistj=0; $(".i_nav a").each(function(i){ thistj=$(this).attr("rel"); if (thistj<pretj){ for (var tj=0;tj<pretj-thistj;tj++){ navcode+='</li></ul>'; } } (thistj==1) ? classname='i_menu' : classname='i_sub_menu'; (thistj>pretj) ? navcode+='<ul class="'+classname+'">' : navcode+='</li>'; navcode+='<li><a href="'+$(this).attr("href")+'">'+$(this).text()+'</a>'; pretj=thistj; }); for (var tj=0;tj<pretj;tj++){ navcode+='</li></ul>'; } $(".i_nav").html(navcode); //一级悬停 $(".i_menu li").hover(function(){ $(this).addClass("now"); $(this).find("ul.i_sub_menu:first").show(); },function(){ $(this).removeClass("now"); $(this).find("ul.i_sub_menu:first").hide(); }); //二级偏移 $(".i_sub_menu").css({left:"0px",top:"30px"}); //二级以上偏移 $(".i_sub_menu").find(".i_sub_menu").css({left:"200px",top:"0px"}); //多级悬停 $(".i_sub_menu li").hover(function(){ $(this).find("a:first").addClass("now"); $(this).find("ul:first").show(); },function(){ $(this).find("a:first").removeClass("now"); $(this).find("ul:first").hide(); }); }); </script>