这是一款较不错的竖排菜单，有立体感效果的菜单，不要以为那些带立体特效的菜单是按钮啊，其实它就是用JavaScript代码修饰出来的按钮，鼠标放上的时候就会有明显的立体文字效果，竖向排列的，也可以修改成横向的。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>有立体感的按钮式文字菜单，竖排</TITLE> </HEAD> <BODY> <STYLE type=text/css>A:link { TEXT-DECORATION: none } A:visited { TEXT-DECORATION: none } A:active { TEXT-DECORATION: none } A:hover { TEXT-DECORATION: none } .up { BORDER-RIGHT: #711200 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: white 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 9pt; PADDING-BOTTOM: 1px; BORDER-LEFT: white 1px solid; COLOR: #ff0000; PADDING-TOP: 1px; BORDER-BOTTOM: #711200 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #eadfd0 } </STYLE> <SCRIPT language=JavaScript> <!-- IE and NS6 Menu Button script kurt.grigg@virgin.net if (!document.layers){ // Choose size and colours here! Width=100; Font='Verdana'; FontSize=9; AFontColor='#000000'; BFontColor='red'; CFontColor='#ffffff'; down="#6699cc"; FontWeight='normal'; //normal or bold! BackGround='#99ccff'; //Same as your body bgcolor! BorderDepth=2; BorderLight='#FFFFFF'; BorderShad='#000000'; //Nothing needs altering past here!!!!!!!!!!!!!!!!!!!!!! function On(id){ with(id.style){ color=BFontColor; borderTopColor=BorderLight; borderLeftColor=BorderLight; borderRightColor=BorderShad; borderBottomColor=BorderShad; } } function Off(id){ with(id.style){ color=AFontColor; borderTopColor=BackGround; borderLeftColor=BackGround; borderRightColor=BackGround; borderBottomColor=BackGround; background=BackGround; } } function Down(id){ with(id.style){ color=CFontColor; borderTopColor=BorderShad; borderLeftColor=BorderShad; borderRightColor=BorderLight; borderBottomColor=BorderLight; background=down; } } function Link(Url,Txt,target){ document.write("<a href='"https://www.jb51.net/article/+Url+"' target='"+target+"'>" +"<div" +"onMouseOver='javascript:On(this)'" +"onMouseOut='javascript:Off(this)'" +"onMouseDown='javascript:Down(this)'>" +Txt+"</div></a>"); } } function Temp(){ alert("TEST"); } //--> </SCRIPT> <!-- End Menu Buttons Part:1 --> <!-- Menu Buttons Part:2 Paste in Body where needed --> <SCRIPT language=JavaScript> <!-- if (!document.layers){ if (document.getElementById&&!document.all){ document.write("<div>" +"<table cellpadding='0' cellspacing='0'>" +"<tr><td valign='top'>"); } Link('http://www.baidu.com','百度一下','_blank'); Link('http://www.yahoo.com','Yahoo','_blank'); Link('http://www.google.com','Google','_blank'); Link('http://www.hongen.com','洪恩在线','_blank'); Link('http://www.163.com','网易','main'); if (document.getElementById&&!document.all){ document.write("</td></tr></table></div>"); } } //--> </SCRIPT> </BODY> </HTML>