js+css实现有立体感的按钮式文字竖排菜单效果

2019-11-20 11:37:49

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js+css实现有立体感的按钮式文字竖排菜单效果。分享给大家供大家参考。具体如下：

这是一款较不错的竖排菜单，有立体感效果的菜单，不要以为那些带立体特效的菜单是按钮啊，其实它就是用JavaScript代码修饰出来的按钮，鼠标放上的时候就会有明显的立体文字效果，竖向排列的，也可以修改成横向的。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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.netif (!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 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+"</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 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></div>");}}//--></SCRIPT></BODY></HTML>

希望本文所述对大家的javascript设计有所帮助。

上一篇：js实现具有高亮显示效果的多级菜单代码

下一篇：JS实现黑客帝国文字下落效果