本文实例讲述了js+css实现有立体感的按钮式文字竖排菜单效果。分享给大家供大家参考。具体如下：
这是一款较不错的竖排菜单，有立体感效果的菜单，不要以为那些带立体特效的菜单是按钮啊，其实它就是用JavaScript代码修饰出来的按钮，鼠标放上的时候就会有明显的立体文字效果，竖向排列的，也可以修改成横向的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-3d-nutton-v-menu-codes/
具体代码如下：
<!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+"'>" +"<div +"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+"</div></a>"); } } function Temp(){ alert("TEST"); } //--> </SCRIPT> <> <> <SCRIPT language=JavaScript> <!-- if (!document.layers){ if (document.getElementById&&!document.all){ document.write("<div>" +"<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></div>"); } } //--> </SCRIPT> </BODY> </HTML>
希望本文所述对大家的javascript设计有所帮助。
【js+css实现有立体感的按钮式文字竖排菜单效果】相关文章：
★ CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
★ Javascript实现div的toggle效果实例分析
★ javascript实现在网页任意处点左键弹出隐藏菜单的方法