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


Posted in Javascript onSeptember 01, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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='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设计有所帮助。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
整理一下常见的IE错误
Nov 18 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
JS实现黑客帝国文字下落效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 #Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 #Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 #Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 #Javascript
JavaScript常用标签和方法总结
Sep 01 #Javascript
You might like
PHP中for与foreach的区别分析
2011/03/09 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
用js实现放大镜效果
2020/10/28 Javascript
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python+flask实现API的方法
2018/11/21 Python
python中的逆序遍历实例
2019/12/25 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
公司租房协议书范本
2014/10/08 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
作文评语集锦
2014/12/25 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
高效课堂教学反思
2016/02/24 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Python软件包安装的三种常见方法
2022/07/07 Python