摘 要：目前很多網(wǎng)站的主要欄目都采用了菜單形式來顯示，得到了非常不錯(cuò)的效果。但是對于菜單后期的維護(hù)和更新，讓很多網(wǎng)站管理員非常頭痛，要重新設(shè)置菜單名或添加刪除菜單項(xiàng)不易實(shí)現(xiàn)，需要掌握HTML、JavaScript等專業(yè)知識來修改網(wǎng)頁代碼才能實(shí)現(xiàn)，不是很簡單。而網(wǎng)站管理員大部分都是網(wǎng)頁制作的門外漢，要想快速地修改菜單名或添加刪除菜單項(xiàng)則是一個(gè)比較困難的事。本文介紹基于SiteServerCMS網(wǎng)頁動態(tài)菜單的制作，使網(wǎng)站管理員在后期方便的維護(hù)和更新菜單變得輕松自如，不再是一件難事。

關(guān)鍵詞：菜單；CMS；STL

中圖分類號：TP393.02

導(dǎo)航是網(wǎng)頁中非常重要的一項(xiàng)功能，各式各樣的網(wǎng)站都要用到導(dǎo)航菜單，便于用戶了解整個(gè)網(wǎng)站的內(nèi)容結(jié)構(gòu)，有選擇性地瀏覽自己所需要的內(nèi)容。當(dāng)網(wǎng)站內(nèi)容比較豐富，結(jié)構(gòu)比較復(fù)雜的時(shí)候，下拉菜單是網(wǎng)頁上最常見的效果之一，用鼠標(biāo)輕輕一點(diǎn)或是移過去，就出現(xiàn)一個(gè)更加詳細(xì)的子菜單，它不僅節(jié)省了網(wǎng)頁排版上的空間，而且使網(wǎng)頁布局簡潔有序。如果能夠?qū)@樣的下拉菜單動態(tài)生成，并能菜單項(xiàng)進(jìn)行增加、修改和刪除等管理，這為網(wǎng)頁增色不少。介紹通過DIV+CSS和Stl語言編程相結(jié)合實(shí)現(xiàn)動態(tài)菜單的方法。

1 DIV+CSS制作菜單模板

設(shè)計(jì)過程是首先定義菜單的HTML結(jié)構(gòu)，然后利用CSS設(shè)置樣式，最絡(luò)實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過主菜單項(xiàng)時(shí)相應(yīng)的子菜單打開，鼠標(biāo)離開時(shí)子菜單關(guān)閉的效果。

菜單的整體結(jié)構(gòu)采用HTML文檔的無序列表，通過

標(biāo)記和
• 標(biāo)記來實(shí)現(xiàn)。首標(biāo)記
  和尾標(biāo)記
  這間是無序列表的內(nèi)容，首標(biāo)記
• 和尾標(biāo)記
之間是列表項(xiàng)的內(nèi)容。

對于菜單ul和li的外層結(jié)構(gòu)，首先進(jìn)行常規(guī)設(shè)置，包括列表高度、背景、文字對齊方式等屬性的設(shè)置。

2 通過SiteSeverCMS建立菜單項(xiàng)

為了后期方便網(wǎng)站管理員利用SiteSeverCMS內(nèi)容管理系統(tǒng)進(jìn)行菜單的管理和維護(hù)，實(shí)現(xiàn)菜單動態(tài)變化，我們利用SiteSeverCMS內(nèi)容管理系統(tǒng)的欄目組進(jìn)管理主導(dǎo)航菜單，具體操作如下：

2.1 添加欄目組

點(diǎn)擊系統(tǒng)左側(cè)菜單“信息管理”-->“歸類管理”-->“欄目組管理”進(jìn)入管理界面，點(diǎn)擊“添加內(nèi)容組”，選擇添加欄目組，單擊確定完成“主導(dǎo)航”欄目組的添加。

2.2 應(yīng)用欄目組

如上面，添加一個(gè)名為“主導(dǎo)航”欄目組后，如果再進(jìn)入“欄目管理”，隨便點(diǎn)開某欄目，如果將“主導(dǎo)航”勾選上，將來在制作模板時(shí)，用在指定位置輸出欄目列表時(shí)，所有勾上的欄目均顯示出來。

3 Stl語言實(shí)現(xiàn)動態(tài)菜單

3.1 首頁菜單的實(shí)現(xiàn)

利用標(biāo)記

3.2 主導(dǎo)航菜單的實(shí)現(xiàn)

利用元素中的groupChannel屬性指定菜單顯示為SiteSeverCMS內(nèi)容管理系統(tǒng)中的“主導(dǎo)航”欄目組中的導(dǎo)航，并利用元素實(shí)現(xiàn)各菜單鏈接至對應(yīng)欄目。代碼如下：

3.2 下拉菜單的實(shí)現(xiàn)

利用元素和顯示各菜單的子菜單為對應(yīng)欄目下的子欄目，并利用元素實(shí)現(xiàn)各子菜單鏈接至對應(yīng)欄目。代碼如下：

4 修正菜單樣式

4.1 修正首頁菜單樣式

a.first

{

color：#000000；/*首頁菜單顏色顯示為黑色*/

text-decoration：none；/*去掉首頁菜單的下劃線*/

margin-right：10px；/*首頁菜單距離主導(dǎo)航10像素*/

}

4.2 修正各項(xiàng)菜單樣式

a.menu

{

color：#000000；/*菜單項(xiàng)顏色顯示為黑色*/

text-decoration：none；/*去掉菜單項(xiàng)的下劃線*/

margin：0px10px；/*菜單項(xiàng)之間間隔20像素*/

}

5 利用SiteSeverCMS設(shè)置子菜單的樣式

為了美化下拉菜單樣式，我們利用指定下拉菜單的樣式名稱daohang，并通過SiteSeverCMS中的下拉菜單樣式添加danghang樣式并完成設(shè)置，具體步驟如下：

點(diǎn)擊系統(tǒng)左側(cè)菜單“顯示管理”-->“模板標(biāo)簽樣式”-->“下拉菜單樣式”進(jìn)入配置界面。選擇添加樣式，并設(shè)置樣式如下表所示：

6 結(jié)束語

通過以上操作，完成菜單制作。通過這種方法制作的菜單，后期即使沒有網(wǎng)頁制作基礎(chǔ)的網(wǎng)站管理員在進(jìn)行網(wǎng)站管理與維護(hù)時(shí)，通過欄目管理便可方便快捷地進(jìn)行菜單管理，完成修改菜單名，添加和刪除菜單等操作。

參考文獻(xiàn)：

[1]吳瑞勇.基于DIV+CSS的網(wǎng)頁下拉菜單的設(shè)計(jì)[J].南昌教育學(xué)院學(xué)報(bào)，2011（01）.

[2]張永福.基于CMS精品課程網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[J].晉城職業(yè)技術(shù)學(xué)院學(xué)報(bào)，211（02）.

[3]魏穎穎，熊淑華，李沖.基于CSS的網(wǎng)頁下拉菜單設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011（04）.

[4]周靜.基于CMS的教師個(gè)人網(wǎng)站建設(shè)[J].瀘州職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2012（03）.

[5]羊波，石雋義，陳瑩.基于CMS網(wǎng)絡(luò)教研工作平臺的設(shè)計(jì)與實(shí)現(xiàn)[J].中國教育技術(shù)裝備，2012（33）.