The example of this article describes the JS+CSS implementation of the three-dimensional button text vertical menu effect. Share to everyone for your reference. Specifically as follows:
This is a nice vertical menu, there is a three-dimensional effect of the menu, do not think those with stereo effects of the menu is a button ah, in fact it is a JavaScript code to decorate the button, the mouse on the time will have a clear stereo text effect, vertical alignment, can also be modified to horizontal.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-css-3d-nutton-v-menu-codes/
The specific code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> has three-dimensional button-style text menu, vertical line & lt;/title> </HEAD> <BODY> <style type=text/css>a:link {text-decoration:none} a:visited {Text-de Coration:none} a:active {Text-decoration:none} a:hover {Text-decoration:none}. Up {border-right: #711200 1px s Olid; 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.g
Rigg@virgin.net if (!document.layers) {//Choose size and colours here!
width=100;
' 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
> "); The function Temp () {alert ("TEST");}//--> </SCRIPT> <!--end menu Buttons part:1--> <!--menu Buttons Part:2 Paste in the 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 ', ' Baidu click ', ' _blank ');
Link (' http://www.yahoo.com ', ' Yahoo ', ' _blank ');
Link (' http://www.google.com ', ' Google ', ' _blank ');
Link (' http://www.hongen.com ', ' Horn online ', ' _blank '); Link (' http://www.163.com', ' NetEase ', ' main '); if (Document.getelementbyid&&!document.all) {document.write ("</td></tr></table></
Div> ");
}}//--> </SCRIPT> </BODY> </HTML>
Hopefully this article will help you with your JavaScript design.
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
