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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-3d-nutton-v-menu-codes/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN ' HTML标题有立体感的按钮式文字菜单，竖排/TItle/header dystyle type=TExT/CSS 3360 link { TEXT-decoration : none } a :已访问{ TExT-decoration : none } a :活动{ TExT-decoration : none } a :悬停{ TExT-decoration : none } .向上{右边框： # 711200 1像素固体；PADDING-right : 1 px；边框-TOP:白色1px实心；PADDING-left : 1 px；FONT-SiZe : 9pt；PADDING-bottom : 1 px；边框-左侧：白色1px实心；color : # ff 0000 padding-top : 1 px；边框-底部： #711200 1px实心；FONT-family : Tahoma；背景-color : # EAD FD 0 }/style script语言=JavaScript！表示“小而可爱的”和NS6菜单按钮脚本[emailprotected]if(！document.layers){//在这里选择尺寸和颜色！宽度=100;font=' Verdana font size=9；AFontColor=' # 000000BFontColor='红色；CFontColor=' # ffffdown=' # 6699 ccfont weight='正常；//正常还是加粗！BackGround=' # 99ccff//和你的身体一样bgcolor！borderedpth=2；border light=' # ffffbordershad=' # 000000//这里没有什么需要改变的过去！！！函数在(id){ id为。style){ color=BFontColor；borderTopColor=边框灯边框光线=边框光线；borderRightColor=border shad border bottomcolor=border shad } }函数关(id){带(id。style){ color=AFontColor；borderTopColor=BackGround bordereftcolor=BackGround borderrightcolor=BackGround borderbottomcolor=BackGround=BackGround } }函数向下(id){与(id。style){ color=CFontColor；borderTopColor=border shad bordereftcolor=border shad borderrightcolor=BorderLightborderBottomColor=border light背景=向下；} }函数链接(Url、Txt、目标){文档。写入(' a href=' URl ' ' target=' target ' ' ' ' div style=' position : relative；'宽度： '宽度px；高度： ' FontSize ' px '边框宽度： ' BorderDepth ' px'边框-颜色：“BackGround”；边框样式：实心；'padd : '字体大小/4.5 '磅；BackGround :“BackGround”；字体系列："字体" font-size : ' font size ' pt；'行高： '字号* 1.2 ' pt字体粗细： '字体粗细'；'文本左对齐：'color :“AFontcolor”；页边距-top :2 px；光标： hand ' ' ' onMouseOver=' JavaScript : on(this)' ' ' ' onMouseOut=' JavaScript : off(this)' ' ' ' onMouseDown=' JavaScript : down(this)' ' Txt '/div/a ')；} }函数temp(){ alert(' TEST ')；}////SCRIPT！-结束菜单按钮第：1部分-!-菜单按钮第：2部分粘贴在身体需要的地方-脚本语言=JavaScript！- if(！文件。层){ if(文档。getelementbyid！文件。all){ document。写入(' div style='位置： relative ' ')表格边框='0 '单元格填充='0 '单元格间距=' 0 ' ' ' trtd valgn=' top ' ')；}链接(' http://www.baidu.com '，'百度一下，' _ blank ')；链接(‘http://www.yahoo.com’、‘雅虎’、‘空白’)；链接(' http://www.google.com '，'谷歌'，' _ blank ')；链接(' http://www.hongen.com '，'洪恩在线，' _ blank ')；链接(' http://www.163.com '，'网易，' main ')；if (document.getElementById！文件。all){ document。write('/TD/tr/table/div ')；} }/////SCRIPT/BODY/HTML希望本文所述对大家的爪哇岛描述语言设计有所帮助。