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

首页

web前端

js教程

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

PHP中文网

Jun 05, 2017 pm 02:26 PM

cssjs按钮特点竖排菜单

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

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

运行效果截图如下：

具体代码如下：

<!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.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="#6699cc";
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("<a href=&#39;"+Url+"&#39; target=&#39;"+target+"&#39;>"
+"<p style=&#39;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&#39;"
+"onMouseOver=&#39;javascript:On(this)&#39;" 
+"onMouseOut=&#39;javascript:Off(this)&#39;" 
+"onMouseDown=&#39;javascript:Down(this)&#39;>"
+Txt+"</p></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("<p style=&#39;position:relative&#39;>"
+"<table border=&#39;0&#39; cellpadding=&#39;0&#39; cellspacing=&#39;0&#39;>"
+"<tr><td valign=&#39;top&#39;>");
}
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&&!document.all){
document.write("</td></tr></table></p>");
}
}
//-->
</SCRIPT>
</BODY>
</HTML>

声明

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

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。