DEDECMS V5两行导航栏的样式修改_DedeCms教程

很多用户反馈当前默认模板的栏目只能显示一行

如果栏目过多就无法显示了

其实可以简单的修改CSS文件即可让栏目两行显示.

效果预览:




修改方法:

1.修改CSS:

替换 "模板目录\样式目录(templets\style) " 中dede.css的栏目菜单的CSS:

.topmenu{
height:40px;
background:url(../images/topmenu_bg.gif) left top repeat-x;
}
.topmenu ul{
width:900px;
height:40px;
background:url(../images/topmenu_r.gif) top center no-repeat;
overflow:hidden;
}
.topmenu ul li{
float:left;
margin-left:-2px;
text-align:center;
background:url(../images/topmenu_bg.gif) left bottom no-repeat;
}
.topmenu ul li a{
float:left;
color:#FFFFFF;
display:block;
padding-left:17px;
padding-right:15px;
text-decoration:none;
height:40px;
line-height:37px;
}
.topmenu ul li a:hover{
color:#FFFF99;
background:url(../images/topmenu_o.gif) center bottom no-repeat;
}
.topmenu .rssbut{
position:relative;
float:right;
margin:-30px 8px auto;
display:inline;
}


替换为

.topmenu{
height:61px;
background:url(../images/topmenu_bg2.jpg) left top repeat-x;
}
.topmenu ul{
width:900px;
height:58px;
background:url(../images/topmenu_r.gif) top center no-repeat;
overflow:hidden;
padding-top:3px;
}
.topmenu ul li{
float:left;
margin-left:-2px;
text-align:center;
white-space:nowrap;
}
.topmenu ul li a{
float:left;
color:#FFFFFF;
display:block;
padding-left:17px;
padding-right:15px;
text-decoration:none;
height:29px;
line-height:29px;
}
.topmenu ul li a:hover{
text-decoration:underline;
color:#FFFFCC;
}
.topmenu .rssbut{
display:none;
}



然后更新 "模板目录\图片目录(templets\images) "下的两个文件

topmenu_bg2.jpg
topmenu_r.gif

原帖地址：http://bbs.dedecms.com/read.php?tid=43150

查看更多 DedeCms教程  织梦模板  织梦DedeCms视频教程  织梦dedecms专题