JS+CSS实现另类带提示效果的竖向导航菜单


Posted in Javascript onOctober 15, 2015

本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单。分享给大家供大家参考。具体如下:

这是一款JS+CSS打造另类带提示的竖向导航菜单,觉得挺不错,只是美工水平有限,有兴趣的朋友就请继续完善吧。

运行效果截图如下:

JS+CSS实现另类带提示效果的竖向导航菜单

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>带提示的竖向导航菜单</title>
<style type="text/css">
#coolmenu{
border: 1px solid black;
width: 160px;
background-color: #E6E6E6;
}
#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
html>body #coolmenu a{
width: auto;
}
#coolmenu a:hover{
background-color: black;
color: white;
}
#tabledescription{
width: 100%;
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
}
</style>
<script type="text/javascript">
var baseopacity=0
function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}
function hidetext(){
cleartimer()
instantset(baseopacity)
}
function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}
function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}
function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
</head>
<body>
<div id="coolmenu">
<a href="#" onMouseover="showtext('精品脚本代码下载!')" onMouseout="hidetext()">开始吧</a>
<a href="#" onMouseover="showtext('常用特效收集与发布')" onMouseout="hidetext()">网页特效</a>
<a href="#" onMouseover="showtext('网站地图索引')" onMouseout="hidetext()">资源分类</a>
<a href="#" onMouseover="showtext('最新更新的资源')" onMouseout="hidetext()">最新更新</a>
<a href="#" onMouseover="showtext('网站最热的下载')" onMouseout="hidetext()">下载排行</a>
<div id="tabledescription"></div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
JavaScript轮播停留效果的实现思路
May 24 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 #Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 #Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 #Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 #Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 #Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 #Javascript
JS更改select内option属性的方法
Oct 14 #Javascript
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
xmlHTTP实例
2006/10/24 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
让python在hadoop上跑起来
2016/01/27 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python中_del_还原数据的方法
2020/12/09 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
HR喜欢的自荐信格式
2013/10/08 职场文书
留学推荐信怎么写
2014/01/25 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
商场促销活动策划方案
2014/08/18 职场文书
环境卫生标语
2015/08/03 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
Go 中的空白标识符下划线
2022/03/25 Golang