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中实现块作用域的方法
Apr 01 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
JS重载实现方法分析
Dec 16 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
详解vue 组件的实现原理
Nov 12 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
2014年三八妇女节活动总结
2014/03/01 职场文书
成语的广告词
2014/03/19 职场文书
中层干部培训方案
2014/06/16 职场文书
节能减耗标语
2014/06/21 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
雷锋之歌观后感
2015/06/10 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python