这是一款较不错的竖排菜单，有立体感效果的菜单，不要以为那些带立体特效的菜单是按钮啊，其实它就是用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='"+url+"' target='"+target+"'>" +"<p style='position:relative;" +"width:"+width+"px;height:"+fontsize+"px;" +"border-width:"+borderdepth+"px;" +"border-color:"+background+";" +"border-style:solid;" +"padding:"+fontsize/4.5+"pt;" +"background:"+background+";" +"font-family:"+font+";" +"font-size:"+fontsize+"pt;" +"line-height:"+fontsize*1.2+"pt;" +"font-weight:"+fontweight+";" +"text-align:left;" +"color:"+afontcolor+";" +"margin-top:2px;" +"cursor:hand'" +"onmouseover='javascript:on(this)'" +"onmouseout='javascript:off(this)'" +"onmousedown='javascript:down(this)'>" +txt+"</p></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("<p style='position:relative'>" +"<table border='0' 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></p>"); } } //--> </script> </body> </html>