js+css实现有立体感的按钮式文字竖排菜单效果-js教程-PHP中文网

首页

web前端

js教程

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

Jun 05, 2017 pm 02:26 PM

css js 按钮特点竖排菜单

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

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

运行效果截图如下：

具体代码如下：

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;有立体感的按钮式文字菜单，竖排&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;STYLE type=text/css&gt;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
}
&lt;/STYLE&gt;
&lt;SCRIPT language=JavaScript&gt;
&lt;!-- IE and NS6 Menu Button script kurt.grigg@virgin.net
if (!document.layers){
// Choose size and colours here!
Width=100;
Font=&#39;Verdana&#39;;
FontSize=9;
AFontColor=&#39;#000000&#39;;
BFontColor=&#39;red&#39;;
CFontColor=&#39;#ffffff&#39;;
down=&quot;#6699cc&quot;;
FontWeight=&#39;normal&#39;; //normal or bold!
BackGround=&#39;#99ccff&#39;; //Same as your body bgcolor!
BorderDepth=2;
BorderLight=&#39;#FFFFFF&#39;;
BorderShad=&#39;#000000&#39;;
//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(&quot;&lt;a href=&#39;&quot;+Url+&quot;&#39; target=&#39;&quot;+target+&quot;&#39;&gt;&quot;
+&quot;&lt;p style=&#39;position:relative;&quot;
+&quot;width:&quot;+Width+&quot;px;height:&quot;+FontSize+&quot;px;&quot;
+&quot;border-width:&quot;+BorderDepth+&quot;px;&quot;
+&quot;border-color:&quot;+BackGround+&quot;;&quot;
+&quot;border-style:solid;&quot;
+&quot;padding:&quot;+FontSize/4.5+&quot;pt;&quot;
+&quot;background:&quot;+BackGround+&quot;;&quot;
+&quot;font-family:&quot;+Font+&quot;;&quot;
+&quot;font-size:&quot;+FontSize+&quot;pt;&quot;
+&quot;line-height:&quot;+FontSize*1.2+&quot;pt;&quot;
+&quot;font-weight:&quot;+FontWeight+&quot;;&quot;
+&quot;text-align:left;&quot;
+&quot;color:&quot;+AFontColor+&quot;;&quot;
+&quot;margin-top:2px;&quot;
+&quot;cursor:hand&#39;&quot;
+&quot;onMouseOver=&#39;javascript:On(this)&#39;&quot; 
+&quot;onMouseOut=&#39;javascript:Off(this)&#39;&quot; 
+&quot;onMouseDown=&#39;javascript:Down(this)&#39;&gt;&quot;
+Txt+&quot;&lt;/p&gt;&lt;/a&gt;&quot;);
}
}
function Temp(){
alert(&quot;TEST&quot;);
}
//--&gt;
&lt;/SCRIPT&gt;
&lt;!-- End Menu Buttons Part:1 --&gt;
&lt;!-- Menu Buttons Part:2 Paste in Body where needed --&gt;
&lt;SCRIPT language=JavaScript&gt;
&lt;!-- 
if (!document.layers){
if (document.getElementById&amp;&amp;!document.all){
document.write(&quot;&lt;p style=&#39;position:relative&#39;&gt;&quot;
+&quot;&lt;table border=&#39;0&#39; cellpadding=&#39;0&#39; cellspacing=&#39;0&#39;&gt;&quot;
+&quot;&lt;tr&gt;&lt;td valign=&#39;top&#39;&gt;&quot;);
}
Link(&#39;http://www.baidu.com&#39;,&#39;百度一下&#39;,&#39;_blank&#39;);
Link(&#39;http://www.yahoo.com&#39;,&#39;Yahoo&#39;,&#39;_blank&#39;);
Link(&#39;http://www.google.com&#39;,&#39;Google&#39;,&#39;_blank&#39;);
Link(&#39;http://www.hongen.com&#39;,&#39;洪恩在线&#39;,&#39;_blank&#39;);
Link(&#39;http://www.163.com&#39;,&#39;网易&#39;,&#39;main&#39;);
if (document.getElementById&amp;&amp;!document.all){
document.write(&quot;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/p&gt;&quot;);
}
}
//--&gt;
&lt;/SCRIPT&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn