JEECMS 導航欄實現二級菜單功能

1.首先登錄 

http://localhost:8080/jeeadmin/jeecms/index.do

JEECMS的管理後臺

配置-->模板   修改 index目錄下的index.html 與 include目錄下的navi.html

原理:

爲生成的ul 添加鼠標劃入劃出效果便可

index.html關鍵代碼

<script type="text/javascript">
$(function() {
        //當鼠標指針穿過元素
        $(".sub").mouseenter(function(){
                //alert("...");
                varthis = $(this);
                //alert("varthis:"+varthis);
                //console.log("%o",varthis);
                varthis.find('ul').slideDown();
		//var tar = varthis.find('ul');
                //console.log("%o",tar);
        });
        //當鼠標指針離開元素時
        $(".sub").mouseleave(function(){
                //alert("...");
                varthis = $(this);
                //alert("varthis:"+varthis);
                //console.log("%o",varthis);
                varthis.find('ul').slideUp();
		//var tar = varthis.find('ul');
                //console.log("%o",tar);
        });
        //事件必須添加在該行以前
	Cms.siteFlow("${base}", location.href, document.referrer);
	$.cookie("_site_id_cookie","${site.id!}",{path: '${base}' });
});
</script>

navi.html代碼

<div id="menu">
	<ul id="nav"> 
		[@cms_channel_list] 
		[#list tag_list as c]
		 [@cms_channel_list parentId=c.id] 
		[#if tag_list?size>0] 
			<li class="sub"> 
		[#else] 
			<li class="sub">[/#if][/@cms_channel_list]
				<a class="sub_a1" href="${c.url}" target="_self"><span>${c.name}</span></a> 
				[@cms_channel_list parentId=c.id][#if tag_list?size>0] 
				<ul class="hide_1"> 
				[@cms_channel_list parentId=c.id] 
				[#list tag_list as c1] 
				[@cms_channel_list parentId=c1.id]
				[#if tag_list?size>0] 
				<li>
		[#else] 
			<li>[/#if][/@cms_channel_list] 
				<a class="sub_a2" href="${c1.url}">${c1.name}</a> 
				[@cms_channel_list parentId=c1.id][#if tag_list?size>0] 

				<ul class="hide_1"> 
				[@cms_channel_list parentId=c1.id] [#list tag_list as c2] 
				<li><a class="sub_a2" href="${c2.url}">${c2.name}</a></li> 
				[/#list] 
		[/@cms_channel_list] 
		</ul> 
		[/#if][/@cms_channel_list] </li> [/#list] [/@cms_channel_list] 
		</ul> 
		[/#if][/@cms_channel_list] </li> [/#list] [/@cms_channel_list] 
	</ul> 
</div>
<style>
#nav {
//display:block;
//float:left;
}
.sub{
//display:block;
padding:10px;
width:100px;
float:left;
}
.sub_a1{
color:black;
}
.sub_a2{
color:black;
}
.show_1{
display:block; 
position:absolute;
z-index:999;
padding:10px;
}
.hide_1{
display:none; 
position:absolute;
z-index:999;
padding:10px;
}

</style>