POST TIME:2020-03-29 13:05
最近用了織夢(mèng)CMS的最新版5.7做了個(gè)網(wǎng)站,發(fā)現(xiàn)系統(tǒng)默認(rèn)的導(dǎo)航條不是很好看,也沒(méi)有下攔菜單,感覺(jué)比較單調(diào)難看,如何美化下拉菜單?經(jīng)本人調(diào)試成功,覺(jué)得效果不錯(cuò),現(xiàn)在做個(gè)教程與大家分享。
美化導(dǎo)航條步驟:
1.將下面這段代碼貼到templetsdefaultooter.htm文件里(我是放在footer文件的最下面)
<!-- //二級(jí)子類
下拉菜單,考慮SEO原因放置于底部。
-->
<script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>
{dede:channelartlist typeid='top' cacheid='channelsonlist'}<ul id="dropmenu{dede:field.typeid/}" class="dropMenu">
{dede:channel type='son' noself='yes'}<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
{/dede:channelartlist}
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>
2.刷新網(wǎng)頁(yè)發(fā)現(xiàn)已經(jīng)神奇地出現(xiàn)了下拉菜單,但此時(shí)是透明的,因?yàn)槿鄙僖粋€(gè)下拉菜單圖片。
把mmenubg.gif 放在/templets/default/images 里面,再刷新下看效果。(注:mmenubg.gif里的文字自己修改。)
3.此時(shí)你發(fā)現(xiàn)菜單與欄目不夠適應(yīng),別急,可以調(diào)節(jié)css來(lái)達(dá)到相應(yīng)的菜單寬度。
打開(kāi)/templets/default/style/織夢(mèng)模板.css文件(用記事本打開(kāi)) 找到.dropMenu 這個(gè)就是控制導(dǎo)航條的。
看下面的代碼:
/*-------- 下拉菜單 --------------*/
.dropMenu {
position:absolute;
top: 0;
z-index:100;
width: 120px;
visibility: hidden;
紅色代碼就是控制下拉菜單的寬度,調(diào)整到自己滿意的寬度。
4.把green_skin.png(已經(jīng)藍(lán)色化)、header_hover.png放在/templets/default/images文件夾里。
(本教程轉(zhuǎn)自官方論壇,感謝作者:織夢(mèng)模板.com/u.php?uid=308">52ew 。)