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專題