織夢(mèng)5.7版本的默認(rèn)模板中，導(dǎo)航欄是沒(méi)有二級(jí)菜單的，其實(shí)默認(rèn)模板中可以設(shè)置二級(jí)菜單。下面我們就來(lái)看看怎樣實(shí)現(xiàn)織夢(mèng)默認(rèn)模板導(dǎo)航欄的二級(jí)菜單。
1、為了演示二級(jí)菜單的樣式，我們創(chuàng)建一個(gè)欄目“新聞中心”，其下有3個(gè)子欄目“公司新聞”、“行業(yè)咨詢”、“視頻中心” ，創(chuàng)建完成后，生成網(wǎng)站，導(dǎo)航欄沒(méi)有下拉菜單的樣式。下面就是二級(jí)菜單的添加方法。
2、首先在默認(rèn)模板文件夾default的footer.htm文件中的頭部加上這段代碼<!--//二級(jí)子類下拉菜單，考慮SEO原因放置于底部-->
<scripttype='text/javascript'src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>
{dede:channelartlisttypeid='top'cacheid='channelsonlist'}
<ulid="dropmenu{dede:field.typeid/}"class="dropMenu">
{dede:channeltype='son'noself='yes'}
<li><ahref="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
{/dede:channelartlist}
<scripttype="text/javascript">cssdropdown.startchrome("navMenu")</script>
把上面代碼放入footer.htm后，保存文件，生成一下網(wǎng)站后，網(wǎng)站的導(dǎo)航欄就已經(jīng)出現(xiàn)二級(jí)菜單的樣式，樣式如下圖：
現(xiàn)在就有了二級(jí)菜單的樣式，并且沒(méi)有背景，是透明的背景。
3、通過(guò)看上面添加的代碼，其中調(diào)用了一個(gè)js文件，是織夢(mèng)系統(tǒng)的/images/js/dropdown.js ，通過(guò)這個(gè)路徑你會(huì)發(fā)現(xiàn)文件是織夢(mèng)系統(tǒng)自帶的，不是模板中的，所以我們就算用其他的模板也可以調(diào)用這個(gè)js樣式。
另外我們現(xiàn)在也可以對(duì)這個(gè)透明的二級(jí)菜單做調(diào)整，因?yàn)槎?jí)菜單的樣式在織夢(mèng)默認(rèn)模板default的style中的dedecms.css中也是默認(rèn)存在的，打開(kāi)dedecms.css查詢“下拉菜單” 這個(gè)詞，就可以找到代碼，如下圖
.dropMenu就是下拉菜單的樣式，懂div+css的朋友應(yīng)該知道怎樣修改，不懂的請(qǐng)學(xué)習(xí)一下css。
4、通過(guò)上面的下拉菜單的css樣式，我們可以看到，下拉菜單的背景是名稱為mmenubg.Gif 的圖片，我們可以把下面的圖片復(fù)制到default的images文件夾下,命名為mmenubg.Gif ，這樣下拉菜單就出現(xiàn)背景了。
備注：
聰明的朋友可能發(fā)現(xiàn)了，其實(shí)，我們可以直接借用織夢(mèng)默認(rèn)的下拉菜單資源，放到自己的模板中，就可以在自己模板中實(shí)現(xiàn)下拉菜單的效果。具體步驟和上面差不多：
1、在自己的模板頭部導(dǎo)航中，用下面代碼調(diào)用導(dǎo)航（其實(shí)這些代碼就是默認(rèn)模板的導(dǎo)航調(diào)用代碼）：
<divid="navMenu">
<UL>
<LI><Ahref="{dede:global.cfg_indexurl/}">首頁(yè)</A></LI>
{dede:channelrow='10'type='top'}
<LI><ahref="[field:typeurl/]"[field:rel/]>[field:typename/]</a></LI>
{/dede:channel}
</UL>
</div>
需要注意的是注意的是<LI><ahref="[field:typeurl/]"[field:rel/]>[field:typename/]</a></LI>這一行，這個(gè)是輸出導(dǎo)航欄欄目的，需要在這里添加上紅色的部分[field:rel/]想要更多樣式就需要自己慢慢測(cè)試了。
提醒：這里首頁(yè)必須用id="navMenu",在css表里把頭部的id或者class更改為默認(rèn)這個(gè)id="navMenu"，因?yàn)榈谌轿視?huì)講到CSS部分的修改。
2、在你網(wǎng)站正在使用的底部模板（如footer.htm）添加如下代碼（其實(shí)就是上面第二步中的下拉菜單js代碼）
<scripttype='text/javascript'src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>
{dede:channelartlisttypeid='top'cacheid='channelsonlist'}<ulid="dropmenu{dede:field.typeid/}"class="dropMenu">
{dede:channeltype='son'noself='yes'}<li><ahref="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
{/dede:channelartlist}
<scripttype="text/javascript">cssdropdown.startchrome("navMenu")</script>
3、到templets/default/style中打開(kāi)dedecms.css文件，尋找“.dropMenu”這個(gè)類，復(fù)制它的所有代碼到你自己的css中，你也可以直接復(fù)制下面的代碼到你的css中。
如下：
.dropMenu{
position:absolute;
top:0;
z-index:100;
width:80px;
visibility:hidden;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
margin-top:-1px;
border:3pxsolid#FF0000;
border-top:0pxsolid#3CA2DC;
background-color:#FFF;
background:url(templets/sdgwy/index_files/mmenubg.gif);
padding-top:6px;
padding-bottom:6px;
}
.dropMenuli{
margin-top:2px;
margin-bottom:4px;
padding-left:6px;
}
.dropMenua{
width:auto;
display:block;
color:black;
padding:2px02px1.2em;
}
*html.dropMenua{
width:100%;
}
.dropMenua:hover{
color:red;
text-decoration:underline;
}
當(dāng)然這里面可以修改下拉菜單樣式，包括下拉菜單的背景顏色或背景圖片以及字體樣式等，具體的可以自己調(diào)試。
完成上面的三個(gè)步驟，你的dede導(dǎo)航下拉菜單功能就實(shí)現(xiàn)了，祝你好運(yùn)。
