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,记得修改路径
<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怎么实现二级导航,反应网上很多教程都不能使用,抽空写了这篇教程,希望对大家有帮助,举一反三,话不多少先看效果:
<SCRIPT type="text/javascript" src="foot.js"></SCRIPT>dedecms标签实现的方法
在群里见到群友在问dedecms怎么实现二级导航,反应网上很多教程都不能使用,抽空写了这篇教程,希望对大家有帮助,举一反三,话不多少先看效果: