重庆小潘seo博客

当前位置:首页 > 重庆网站建设 >

重庆网站建设

dedecms二级导航菜单实现方法详解

时间:2016-08-16 02:03:11 作者:采集侠 来源:网络整理
在群里见到群友在问dedecms怎么实现二级导航,反应网上很多教程都不能使用,抽空写了这篇教程,希望对大家有帮助,举一反三,话不多少先看效果: 在群里见到群友在问dedecms怎么实现二级导航,反应网上很多教程都不能使用,抽空写了这篇教程,希望对大家有
* { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } A { text-decoration:none; } DIV { WORD-WRAP: break-word; WORD-BREAK: break-all } LI { LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none } .nav { MARGIN: 7px auto 0px; WIDTH: 968px; OVERFLOW: hidden } .nav LI { FLOAT: left; HEIGHT: 48px } .nav_left { WIDTH: 8px; BACKGROUND: url(img/s02.gif) no-repeat } .nav_center { WIDTH: 952px; BACKGROUND: url(img/s03.gif) repeat-x; FONT-SIZE: 16px } .nav_right { WIDTH: 8px; BACKGROUND: url(img/s04.gif) no-repeat } .nav_li_li { PADDING-RIGHT: 2px; BACKGROUND: url(img/s05.gif) no-repeat right top } .nav A { PADDING-BOTTOM: 0px; LINE-HEIGHT: 42px; PADDING-LEFT: 49px; PADDING-RIGHT: 49px; FLOAT: left; HEIGHT: 48px; COLOR: #fff; PADDING-TOP: 0px } .nav .nav_on { BACKGROUND: url(img/s06.jpg) no-repeat center top; TEXT-DECORATION: none } .nav A:hover { BACKGROUND: url(img/s06.jpg) no-repeat center top; TEXT-DECORATION: none } .nav_li_li DIV { Z-INDEX: 1000; BORDER-BOTTOM: #5970b2 1px solid; POSITION: absolute; BORDER-LEFT: #5970b2 1px solid; PADDING-BOTTOM: 5px; MARGIN-TOP: 42px; PADDING-LEFT: 5px; WIDTH: 190px; PADDING-RIGHT: 5px; ZOOM: 1; BACKGROUND: #ffffff 0px 0px; VISIBILITY: hidden; BORDER-TOP: #5970b2 1px solid; BORDER-RIGHT: #5970b2 1px solid; PADDING-TOP: 5px } .nav_li_li DIV A { POSITION: relative; TEXT-ALIGN: center; PADDING-BOTTOM: 5px; LINE-HEIGHT: 18px; MARGIN: 0px; PADDING-LEFT: 5px; WIDTH: 80px; PADDING-RIGHT: 5px; DISPLAY: block; WHITE-SPACE: nowrap; BACKGROUND: #ffffff 0px 0px; HEIGHT: 18px; COLOR: #2875de; FONT-SIZE: 12px; TEXT-DECORATION: none; PADDING-TOP: 5px } .nav_li_li DIV A:hover { BACKGROUND: #49a3ff; COLOR: #fff }

调用js,记得修改路径

演示地址:dedecms实现二级导航

<UL class=nav> <LI class=nav_left></LI> <LI class=nav_center> <UL> <LI class=nav_li_li><A href="{dede:global.cfg_cmsurl/}/">首页</A></LI> {dede:channelartlist typeid='top' row='2'} <LI> <A onmouseout=mclosetime() href="{dede:field.typeurl/}">{dede:field.typename/}</A> <DIV id={dede:field.typeid/} onmouseover=mcancelclosetime() onmouseout=mclosetime()> <A href="{dede:field.typeurl/}">全部分类</A> {dede:channel type='son' } <A href="[field:typeurl/]">[field:typename/]</A> {/dede:channel} </DIV></LI> </UL></LI> <LI class=nav_right></LI></UL>

大家根据自己的喜好修改导航样式,这里就不做太多的说明,有什么问题,可以评论留言给我。尽自己最大可能帮助大家!最后转载请注明出处,谢谢!

首先在你的css里面加入

dedecms二级导航打包下载

在群里见到群友在问dedecms怎么实现二级导航,反应网上很多教程都不能使用,抽空写了这篇教程,希望对大家有帮助,举一反三,话不多少先看效果:

dedecms二级导航菜单实现方法详解

<SCRIPT type="text/javascript" src="foot.js"></SCRIPT>

dedecms标签实现的方法

在群里见到群友在问dedecms怎么实现二级导航,反应网上很多教程都不能使用,抽空写了这篇教程,希望对大家有帮助,举一反三,话不多少先看效果: