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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
js动态创建标签示例代码
Jun 09 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
js实现二级联动简单实例
Jan 11 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
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
python用Configobj模块读取配置文件
2020/09/26 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
销售业务员岗位职责
2014/01/29 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书