JS+CSS实现大气清新的滑动菜单效果代码


Posted in Javascript onOctober 22, 2015

本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码。分享给大家供大家参考,具体如下:

这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片。

运行效果截图如下:

JS+CSS实现大气清新的滑动菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑动导航菜单</title>
<style>
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
</style>
<script type="text/javascript">
var DDSPEED = 10;
var DDTIMER = 15;
function ddMenu(id,d){
 var h = document.getElementById(id + '-ddheader');
 var c = document.getElementById(id + '-ddcontent');
 clearInterval(c.timer);
 if(d == 1){
  clearTimeout(h.timer);
  if(c.maxh && c.maxh <= c.offsetHeight){return}
  else if(!c.maxh){
   c.style.display = 'block';
   c.style.height = 'auto';
   c.maxh = c.offsetHeight;
   c.style.height = '0px';
  }
  c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 }else{
  h.timer = setTimeout(function(){ddCollapse(c)},50);
 }
}
function ddCollapse(c){
 c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
function cancelHide(id){
 var h = document.getElementById(id + '-ddheader');
 var c = document.getElementById(id + '-ddcontent');
 clearTimeout(h.timer);
 clearInterval(c.timer);
 if(c.offsetHeight < c.maxh){
  c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 }
}
function ddSlide(c,d){
 var currh = c.offsetHeight;
 var dist;
 if(d == 1){
  dist = (Math.round((c.maxh - currh) / DDSPEED));
 }else{
  dist = (Math.round(currh / DDSPEED));
 }
 if(dist <= 1 && d == 1){
  dist = 1;
 }
 c.style.height = currh + (dist * d) + 'px';
 c.style.opacity = currh / c.maxh;
 c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
 if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
  clearInterval(c.timer);
 }
}
</script>
</head>
<body>
<dl class="dropdown">
 <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">源码下载</dt>
 <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
  <ul>
   <li><a href="#" class="underline">最新源码</a></li>
   <li><a href="#" class="underline">下载排行</a></li>
   <li><a href="#" class="underline">脚本资源</a></li>
   <li><a href="#">Ajax实例</a></li>
  </ul>
 </dd>
</dl>
<dl class="dropdown">
 <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">网页特效</dt>
 <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
  <ul>
   <li><a href="#" class="underline">菜单导航</a></li>
   <li><a href="#" class="underline">层和布局</a></li>
   <li><a href="#" class="underline">图片特效</a></li>
  </ul>
 </dd>
</dl>
</body>
</html>

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

Javascript 相关文章推荐
JS实现文字掉落效果的方法
May 06 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 #Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 #Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 #Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 #Javascript
JavaScript中Boolean对象的属性解析
Oct 21 #Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 #Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 #Javascript
You might like
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python调用.NET库的方法步骤
2019/12/27 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
python 爬虫请求模块requests详解
2020/12/04 Python
string = null 和string = ''的区别
2013/04/28 面试题
高考自主招生自荐信
2013/10/20 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
地道战观后感2000字
2015/06/04 职场文书
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android