本文執行個體講述了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.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設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
