織夢導航欄制作下拉菜單,織夢技術
導讀:織夢技術織夢技術織夢5.7版本的默認模板中,導航欄是沒有二級菜單的,其實默認模板中可以設置二級菜單。下面我們就來看看怎樣實現織夢默認模板導航欄的二級菜單。dede手機模板dede后臺模板。
織夢5.7版本的默認模板中,導航欄是沒有二級菜單的,其實默認模板中可以設置二級菜單。下面我們就來看看怎樣實現織夢默認模板導航欄的二級菜單。
1、為了演示二級菜單的樣式,我們創建一個欄目“新聞中心”,其下有3個子欄目“公司新聞”、“行業咨詢”、“視頻中心” ,創建完成后,生成網站,導航欄沒有下拉菜單的樣式。下面就是二級菜單的添加方法。
2、首先在默認模板文件夾default的footer.htm文件中的頭部加上這段代碼<!-- //二級子類下拉菜單,考慮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>
把上面代碼放入footer.htm后,保存文件,生成一下網站后,網站的導航欄就已經出現二級菜單的樣式,樣式如下圖:
現在就有了二級菜單的樣式,并且沒有背景,是透明的背景。
3、通過看上面添加的代碼,其中調用了一個js文件,是織夢系統的/images/js/dropdown.js ,通過這個路徑你會發現文件是織夢系統自帶的,不是模板中的,所以我們就算用其他的模板也可以調用這個js樣式。
另外我們現在也可以對這個透明的二級菜單做調整,因為二級菜單的樣式在織夢默認模板default的style中的dedecms.css中也是默認存在的,打開dedecms.css查詢“下拉菜單” 這個詞,就可以找到代碼,如下圖
.dropMenu就是下拉菜單的樣式,懂div+css的朋友應該知道怎樣修改,不懂的請學習一下css。
4、通過上面的下拉菜單的css樣式,我們可以看到,下拉菜單的背景是名稱為mmenubg.Gif 的圖片,我們可以把下面的圖片復制到default的images文件夾下,命名為mmenubg.Gif ,這樣下拉菜單就出現背景了。
聲明: 本文由我的SEOUC技術文章主頁發布于:2023-07-19 ,文章織夢導航欄制作下拉菜單,織夢技術主要講述菜單,標簽,織夢網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_31001.html