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 相关文章推荐
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python遍历序列enumerate函数浅析
2017/10/17 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
利用Python计算KS的实例详解
2020/03/03 Python
在keras里实现自定义上采样层
2020/06/28 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
python递归函数用法详解
2020/10/26 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
thinkphp5 路由分发原理
2021/03/18 PHP
数据库的约束含义
2012/09/09 面试题
银行介绍信范文
2014/01/10 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python