dedecms 5.7导航菜单自动判断其所在栏目，并显示效果

dede5.7测试有效,转载请著名出处：http://tyllxx.iteye.com

 

要求在网站的子页面中时，主菜单显示其所在栏目。如图

然后鼠标上去

 到新闻资讯页后，鼠标离开

 

以上效果直接使用同一个head.htm文件引用实现，力求最简，考虑过循环的方式，但是循环体中无法判断当前所在栏目。

 

<ul class="nav">
	<li class='nav0{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me!="1"&@me!="2"&@me!="3"&@me!="4"&@me!="5"&@me!="6")@me=" clock_on0"; else @me="";{/dede:field}'><a href="/"></a></li>
	<li class='nav1{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="1")@me=" clock_on1"; else @me="";{/dede:field}'><a href="/About_us"></a></li>
	<li class='nav2{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="2")@me=" clock_on2"; else @me="";{/dede:field}'><a href="/News"></a></li>
	<li class='nav3{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="3")@me=" clock_on3"; else @me="";{/dede:field}'><a href="/Service"></a></li>
	<li class='nav4{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="4")@me=" clock_on4"; else @me="";{/dede:field}'><a href="/Works"></a></li>
	<li class='nav5{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="5")@me=" clock_on5"; else @me="";{/dede:field}'><a href="/Join"></a></li>
	<li class='nav6{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="6")@me=" clock_on6"; else @me="";{/dede:field}'><a href="/Contact"></a></li>
</ul>

if(@me=="5")部分是判断栏目的顶级ID，根据需要修改，A标签中的连接需手动添加，名称按需求添加。以上用的是图片，所以A标签中无内容。

 

以下下是配套的CSS代码，取用请根据个人的需求修改。

 

 

ul.nav{margin: 0 auto; padding: 0 5px; width: 960px; height: 39px;background-image: url(../images/nav_bg.png); background-repeat: no-repeat; background-position: top center; clear: both;}
ul.nav li{width: 137px; height: 39px; float: left;}
ul.nav li a{ display: block; width: 137px; height: 39px;}
ul.nav li.nav0,ul.nav li.nav0 a{width: 138px;}

ul.nav li.nav0 a:hover,ul.nav li.clock_on0 a{background: url(../images/nav_bg.png) -5px -39px no-repeat;}
ul.nav li.nav1 a:hover,ul.nav li.clock_on1 a{background: url(../images/nav_bg.png) -143px -39px no-repeat;}
ul.nav li.nav2 a:hover,ul.nav li.clock_on2 a{background: url(../images/nav_bg.png) -280px -39px no-repeat;}
ul.nav li.nav3 a:hover,ul.nav li.clock_on3 a{background: url(../images/nav_bg.png) -417px -39px no-repeat;}
ul.nav li.nav4 a:hover,ul.nav li.clock_on4 a{background: url(../images/nav_bg.png) -554px -39px no-repeat;}
ul.nav li.nav5 a:hover,ul.nav li.clock_on5 a{background: url(../images/nav_bg.png) -691px -39px no-repeat;}
ul.nav li.nav6 a:hover,ul.nav li.clock_on6 a{background: url(../images/nav_bg.png) -828px -39px no-repeat;}

CSS所配图片的样式：一张图片上下层

 

关于其中的一些问题：

 

1. {dede:field name="typeid"不能写成{dede:field.typeid 的形式，否则后台生成是会提示错误。

2. if判断不能用iif来做，经测试无效，也许是5.7不支持iif了。

 

转载请著名出处：http://tyllxx.iteye.com