帝国cms二级导航菜单并当前高亮显示且一级导航鼠标经过时显示该栏目别名（效果参见本网站）

时间：2020-02-14 09:59:02  来源：chqqws.com  作者：陈清泉

效果参见本网站，以下为代码部分
HTML：
   <ul class="nav">
        <li><a class="hm_pg" title="首页" href="[!--news.url--]" target="_self"><h1>首页</h1><span>Home</span></a></li>

[e:loop={"select classid,classname,islast,bname from {$dbtbpre}enewsclass where bclassid=0 order by myorder,classid asc",0,24,0}] 
<?php 
$classurl=sys_ReturnBqClassname($bqr,9);//取得栏目地址 
$class=""; 
if($GLOBALS[navclassid]){ 
$fcr=explode('|',$class_r[$GLOBALS[navclassid]][featherclass]); 
$topbclassid=$fcr[1]?$fcr[1]:$GLOBALS[navclassid];//取得当前栏目的一级栏目ID 
if($bqr[classid]==$topbclassid) 
{ 
$class='class="nav_current menu"'; 
} 
else if(!$bqr[islast]) //判断是否终极栏目
{ 
$class='class="menu"'; 
} 
} 
?> 
<li><a <?=$class?> href="<?=$classurl?>"  target="_self"><h1><?=$bqr[classname]?></h1><span><?=$bqr[bname]?></span></a>
    <dl>
    <?php
    //取得栏目下的子栏目       
    $newsclass=$empire->query("select classid,classname from ".$dbtbpre."enewsclass where bclassid=".$bqr[classid]." order by myorder,classid desc");
    while($classr=$empire->fetch($newsclass))
    {
        $classrurl=sys_ReturnBqClassname($classr,9); //取得子栏目地址
        ?>
        <dt><a href="<?=$classrurl?>" target="_self"><?=$classr[classname]?></a></dt>
    <?php
    }
    ?>
    </dl>
</li> 
[/e:loop] 
        <div class="clearfix"></div>
</ul>
CSS:
*{margin:0;padding:0;list-style:none;font-family:"微软雅黑","helvetica neue";font-weight:normal;}
a{text-decoration:none;cursor:pointer;color:#000;}
input{outline:none;}
img{display:block;border:none;}
.clearfix{clear:both;}
.nav{margin-top:21px;}
.nav li{float:left;width:20%;}
.nav li>a{display:block;width:100%;padding-top:8px;padding-bottom:2px;}
.nav li>a>h1{min-width:110px;font-size:16px;text-align:center;}
.nav span{display:block;text-align:center;color:white;font-size:12px;}
.nav_current{color:#4db6e3;}
.nav_hover_current{background-color:#4db6e3;color:#FFF;}
.under_menu{position:relative;}
.nav li dl{position:absolute;top:47px;left:0;text-align:center;background-color:#06F;display:none;z-index:10;}
.nav dl a{color:white;font-size:14px;line-height:40px;width:110px;display:block;}
.under_hover_current{background-color:#fc5150;color:#FF3;}
.nav .yellow_text{color:#FFC;}
.nav li .yl_txt{color:#ffffbd;}
.sonclass_hover{box-shadow: 1px 1px 1px #CCCCCC;}
JS（需引入jquery文件）:
<script type="text/javascript">
$(function(){
    //NAV
    $(".nav li > a").mouseenter(function(){
        $(".nav li > a").removeClass("nav_hover_current");
        $(this).addClass("nav_hover_current");
    })
    $(".nav li").mouseleave(function(){
        $(".nav li > a").removeClass("nav_hover_current");
    })    
    
    $(".nav li").mouseenter(function(){
        $(this).css("position","relative");
        $(this).children("dl").css("display","block");
    })
    $(".nav li").mouseleave(function(){
        $(this).children("dl").css("display","none");
    })
        
    $(".nav li dl").mouseenter(function(){
        $(this).addClass("sonclass_hover");
        $(this).prev("a").addClass("yl_txt").addClass("sonclass_hover");
        $(this).parent("li").addClass("sonclass_hover");
        $(this).children("a").addClass("yellow_text").addClass("sonclass_hover");
    })
    $(".nav li dl").mouseleave(function(){
                $(this).removeClass("sonclass_hover");
        $(this).children("a").removeClass("nav_hover_current");
        $(this).prev("a").removeClass("yl_txt").removeClass("sonclass_hover");
        $(this).parent("li").removeClass("sonclass_hover");
        $(this).children("a").removeClass("yellow_text");
    })    
    
    $(".nav li dl dt").mouseenter(function(){
        $(this).removeClass("under_hover_current");
        $(this).addClass("under_hover_current");
                $(this).children("a").addClass("yellow_text");
    })
    $(".nav li dl dt").mouseleave(function(){
        $(this).removeClass("under_hover_current");
                $(this).children("a").removeClass("yellow_text");

    })    
})
</script> 
注意：为保持当前高亮效果需在首页模板添加如下JS代码
JS：
<script type="text/javascript">
$(function(){
    $(".hm_pg").addClass("nav_current");
})
</script>