經(jīng)典網(wǎng)頁下拉菜單
發(fā)布時(shí)間：2008-12-24 閱讀數(shù)： 次 來源：網(wǎng)樂原科技
說起網(wǎng)頁上的下拉菜單，最最經(jīng)典的就是微軟風(fēng)格的下拉菜單。凡是去過www.microsoft.com網(wǎng)站的看官都對(duì)這個(gè)簡潔明快的下拉菜單垂涎不已。然而無奈的是復(fù)雜的代碼讓人望而生畏，記得論壇上經(jīng)常有人詢問這種菜單怎么做?，F(xiàn)在我們就來介紹這個(gè)菜單如何制作。第一種方法我們使用smartmenu。他可以制作一個(gè)始終浮動(dòng)在屏幕頂端的下拉菜單。
去看看微軟的經(jīng)典菜單
源代碼名稱：Smart Menu (跨瀏覽器版)
作者：Constantin Kuznetsov Jr.
類型：外部js文件
效果：http://www.5dmedia.com/rudolf/web/web-navi1-0.htm
制作方法：菜單源文件下載
第１步：將下列代碼復(fù)制到網(wǎng)頁的標(biāo)簽之間：
<style>
<!--
all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
A:hover {color: red;}
-->
</style>
第２步：將下面的代碼復(fù)制到<body>標(biāo)簽的右邊，位置緊挨著<body>標(biāo)簽：
<script language="JavaScript" src="menu.js">
/*
Static Top Menu Script
By Constantin Kuznetsov Jr. (GoldenFox@bigfoot.com)
Featured on Dynamicdrive.com
For full source code and installation instructions to this script, visit Dynamicdrive.com
*/
</script>
<script language="JavaScript" src="menucontext.js"></script>
<script language="JavaScript">
showToolbar();
</script>
<script language="JavaScript">
function UpdateIt(){
if (document.all){
document.all["MainTable"].style.top = document.body.scrollTop;
setTimeout("UpdateIt()", 200);
}
}
UpdateIt();
</script>
第３步：添加菜單的內(nèi)容。編輯menucontext.js文件，所有的菜單選項(xiàng)都在這里設(shè)置。默認(rèn)的menucontext.js里面的內(nèi)容，比較復(fù)雜我現(xiàn)在把代碼精簡出來。給大家做一個(gè)說明。整個(gè)代碼如下：
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", "Macromedia公司", "Macromedia公司", "http://www.macromedia.com");
menu.addSubItem("multimedia", "5D多媒體", "5D多媒體", "http://www.5dmedia.com");
//圖像處理子菜單定義
menu.addSubItem("image", "Adobe公司", "Adobe公司", "http://www.adobe.com");
menu.addSubItem("image", "Corel公司", "Corel公司", "http://www.corel.com");
menu.addSubItem("image", "Metacreation公司", "Metacreation公司", "http://www.metacreations.com");
//結(jié)束菜單定義
menu.showMenu();
}
上面的例子中制作的是一個(gè)有兩個(gè)主菜單的菜單。一個(gè)主菜單為多媒體，一個(gè)主菜單為圖像處理。主要靠兩個(gè)命令來制作Additem為添加主菜單項(xiàng)目。格式為AddItem(菜單標(biāo)記, 文本說明, 文本提示, 位置,替換位置)。AddSubItem為添加子菜單項(xiàng)目，idparent為主菜單的菜單標(biāo)記，其余同前。
第４步：上傳菜單文件。將 menu.js和menucontext.js文件上傳到和網(wǎng)頁文件同一目錄下。這樣就完成了所有的操作。
菜單安裝的一些善后工作：
安裝了菜單之后，如果需要將菜單完全與網(wǎng)頁頂部和左邊緊密結(jié)合的話，你可以把<body>標(biāo)簽修改成為<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">。
或許大家會(huì)對(duì)菜單里的文字感到不滿意。你可以把制作菜單第一步的CSS代碼進(jìn)行修改。比如<style>
<!--
all.clsMenuItemNS{font-size: 10.5pt; color: white; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font-size: 10.5pt; color: white; cursor: hand;}
A:hover {color: red;}
-->
</style>
將里面的字體大小換成了10.5磅的話，中文字就會(huì)簡潔干凈多了。
同樣如果對(duì)菜單的表格感到不滿意的話，可以修改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ū)挾?br>
this.subMenuPaneBorder 修改的是子菜單的邊框?qū)挾取?br>
修改完畢文件之后重新上傳js文件即可。只要修改的好就可以發(fā)揮成為多種風(fēng)格了。
桂公網(wǎng)安備45010502000253號(hào)
電子營業(yè)執(zhí)照
