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 相关文章推荐
jquery 缓存问题的几个解决方法
Nov 11 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
Vue父子之间值传递的实例教程
Jul 02 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javascript event 事件解析
2011/01/31 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
详解python3百度指数抓取实例
2016/12/12 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python中作用域的深入讲解
2018/12/10 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
python中添加模块导入路径的方法
2021/02/03 Python
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
中层干部竞聘演讲稿
2014/05/15 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
会计入职心得体会
2016/01/22 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电