說起網(wǎng)頁上的下拉菜單，最最經(jīng)典的就是微軟風格的下拉菜單。凡是去過www.microsoft.com網(wǎng)站的看官都對這個簡潔明快的下拉菜單垂涎不已。然而無奈的是復(fù)雜的代碼讓人望而生畏，記得論壇上經(jīng)常有人詢問這種菜單怎么做?，F(xiàn)在我們就來介紹這個菜單如何制作。第一種方法我們使用smartmenu。他可以制作一個始終浮動在屏幕頂端的下拉菜單。
去看看微軟的經(jīng)典菜單
源代碼名稱：Smart Menu (跨瀏覽器版)
作者：Constantin Kuznetsov Jr.
類型：外部js文件
制作方法：菜單源文件下載
第１步：將下列代碼復(fù)制到網(wǎng)頁的標簽之間：
第２步：將下面的代碼復(fù)制到標簽的右邊，位置緊挨著標簽：
第３步：添加菜單的內(nèi)容。編輯menucontext.js文件，所有的菜單選項都在這里設(shè)置。默認的menucontext.js里面的內(nèi)容，比較復(fù)雜我現(xiàn)在把代碼精簡出來。給大家做一個說明。整個代碼如下： function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location);
//主菜單定義
menu = new Menu();
menu.addItem("multimedia", "多媒體", "多媒體軟件", null, null);
menu.addItem("image", "圖像處理", "圖像處理軟件", null, null);
//多媒體子菜單定義
menu.addSubItem("multimedia", "凡人網(wǎng)絡(luò)", "凡人網(wǎng)絡(luò)", "http://www.venshop.com");
menu.addSubItem("multimedia", "我要網(wǎng)上開店", "我要網(wǎng)上開店", "http://www.venshop.com");
//圖像處理子菜單定義
menu.addSubItem("image", "開店系統(tǒng)", "開店系統(tǒng)", "http://www.venshop.com");
menu.addSubItem("image", "網(wǎng)上開店系統(tǒng)", "網(wǎng)上開店系統(tǒng)", "http://www.venshop.com");
menu.addSubItem("image", "網(wǎng)上購物系統(tǒng)", "網(wǎng)上購物系統(tǒng)", "http://www.venshop.com");
//結(jié)束菜單定義
menu.showMenu();
}
上面的例子中制作的是一個有兩個主菜單的菜單。一個主菜單為多媒體，一個主菜單為圖像處理。主要靠兩個命令來制作Additem為添加主菜單項目。格式為AddItem(菜單標記, 文本說明, 文本提示, 位置,替換位置)。AddSubItem為添加子菜單項目，idparent為主菜單的菜單標記，其余同前。
第４步：上傳菜單文件。將 menu.js和menucontext.js文件上傳到和網(wǎng)頁文件同一目錄下。這樣就完成了所有的操作。
菜單安裝的一些善后工作：
安裝了菜單之后，如果需要將菜單完全與網(wǎng)頁頂部和左邊緊密結(jié)合的話，你可以把標簽修改成為。
或許大家會對菜單里的文字感到不滿意。你可以把制作菜單第一步的CSS代碼進行修改。比如
將里面的字體大小換成了10.5磅的話，中文字就會簡潔干凈多了。
同樣如果對菜單的表格感到不滿意的話，可以修改menu.js文件中的代碼例如：
function Menu()
{
this.bgColor = "#008080";
if (ie) this.menuFont = "bold xx-small Verdana";
if (n) this.menuFont = "bold x-small Verdana";
// this.fontColor = "white";
this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0;
this.bgcolor 修改的是菜單屬性
this.mainPaneBorder 修改的是主菜單的邊框?qū)挾?
this.subMenuPaneBorder 修改的是子菜單的邊框?qū)挾取?
修改完畢文件之后重新上傳js文件即可。只要修改的好就可以發(fā)揮成為多種風格了。
轉(zhuǎn)載請注明出自：凡人網(wǎng)絡(luò)
VenShop.Com
