對于如今熱衷于網頁設計的愛好者們來說，單調的網頁效果已經遠遠不能滿足他們新奇的心理了。本文就來介紹一種簡單的下拉菜單的制作。只要你懂得一點點HTML的知識，就可以。即使什么也不懂，照葫蘆畫瓢也行，呵呵。 第一步，定義下拉菜單JS代碼 ＜SCRIPT lang
對于如今熱衷于網頁設計的愛好者們來說，單調的網頁效果已經遠遠不能滿足他們新奇的心理了。本文就來介紹一種簡單的下拉菜單的制作。只要你懂得一點點HTML的知識，就可以。即使什么也不懂，照葫蘆畫瓢也行，呵呵。
第一步，定義下拉菜單JS代碼
＜SCRIPT language=JavaScript＞
＜!–
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))＞0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i＜d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i＜d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i＜(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v==show)?visible:(v==hide)?hidden:v; }
obj.visibility=v; }
}
//–＞
＜/SCRIPT＞
＜!–
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))＞0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i＜d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i＜d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i＜(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v==show)?visible:(v==hide)?hidden:v; }
obj.visibility=v; }
}
//–＞
＜/SCRIPT＞
第二步，在適當的位置插入目錄菜單
＜TABLE borderColor=#ffffff height=25 width=150 align=left bgColor=#cccccc border=1 ＞
＜TBODY＞ ＜TR＞
＜TD
onmouseover=”MM_showHideLayers(Layer2,,hide,Layer1,,show)”
borderColorLight=#000000 width=100 bgColor=#ccccff height=15＞
＜DIV align=center＞＜A
onclick=”MM_showHideLayers(Layer2,,hide,Layer1,,show)”
href=”2#”＞網上書店＜/A＞＜/DIV＞＜/TD＞
＜TD
onmouseover=”MM_showHideLayers(Layer2,,show,Layer1,,hide)”
borderColorLight=#000000 width=100 bgColor=#ccccff height=15＞
＜DIV align=center＞＜A
onclick=”MM_showHideLayers(Layer2,,show,Layer1,,hide)”
href=”1#”＞書盤目錄＜/A＞＜/DIV＞＜/TD＞
＜/TR＞
＜/TBODY＞
＜/TABLE＞
＜TBODY＞ ＜TR＞
＜TD
onmouseover=”MM_showHideLayers(Layer2,,hide,Layer1,,show)”
borderColorLight=#000000 width=100 bgColor=#ccccff height=15＞
＜DIV align=center＞＜A
onclick=”MM_showHideLayers(Layer2,,hide,Layer1,,show)”
href=”2#”＞網上書店＜/A＞＜/DIV＞＜/TD＞
＜TD
onmouseover=”MM_showHideLayers(Layer2,,show,Layer1,,hide)”
borderColorLight=#000000 width=100 bgColor=#ccccff height=15＞
＜DIV align=center＞＜A
onclick=”MM_showHideLayers(Layer2,,show,Layer1,,hide)”
href=”1#”＞書盤目錄＜/A＞＜/DIV＞＜/TD＞
＜/TR＞
＜/TBODY＞
＜/TABLE＞
第三步，插入隱藏層的定義.
＜DIV id=Layer1 style=”Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 12px; WIDTH: 88px; HEIGHT: 163px”
＞
＜TABLE borderColor=#ffffff bgColor=#ccccff borderColorLight=#000000 border=1 onmouseover=”MM_showHideLayers
(Layer1,,show)” onmouseout=”MM_showHideLayers(Layer1,,hide)”＞
＜TBODY＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A href=”A#”＞最新圖書＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A href=”S#”＞熱點圖書＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A href=”D#”＞隆重推出＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜/TBODY＞＜/TABLE＞
＜/DIV＞
＜DIV id=Layer2 style=”Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 85px; WIDTH: 120px; HEIGHT: 127px”
＞
＜TABLE borderColor=#ffffff bgColor=#ccccFF borderColorLight=#000000 border=1 onmouseover=”MM_showHideLayers
(Layer2,,show)” onmouseout=”MM_showHideLayers(Layer2,,hide)”＞
＜TBODY＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A
href=”F#”＞總目錄＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A
href=”G#”＞圖書目錄＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜/TBODY＞＜/TABLE＞
＜/DIV＞
＞
＜TABLE borderColor=#ffffff bgColor=#ccccff borderColorLight=#000000 border=1 onmouseover=”MM_showHideLayers
(Layer1,,show)” onmouseout=”MM_showHideLayers(Layer1,,hide)”＞
＜TBODY＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A href=”A#”＞最新圖書＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A href=”S#”＞熱點圖書＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A href=”D#”＞隆重推出＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜/TBODY＞＜/TABLE＞
＜/DIV＞
＜DIV id=Layer2 style=”Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 85px; WIDTH: 120px; HEIGHT: 127px”
＞
＜TABLE borderColor=#ffffff bgColor=#ccccFF borderColorLight=#000000 border=1 onmouseover=”MM_showHideLayers
(Layer2,,show)” onmouseout=”MM_showHideLayers(Layer2,,hide)”＞
＜TBODY＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A
href=”F#”＞總目錄＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TD height=15＞
＜DIV align=center＞＜A
href=”G#”＞圖書目錄＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜/TBODY＞＜/TABLE＞
＜/DIV＞
到這里，你就可以看到一個完整的下拉菜單的網頁特效了。
