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

 6219

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

然后鼠标上去

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

 

以上效果直接使用同一个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了。


本文网址:https://www.zztuku.com/index.php/detail-7996.html
站长图库 - dedecms 5.7导航菜单自动判断其所在栏目,并显示效
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐

    jQuery图片摇晃显示效果