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 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
vue移动端路由切换实例分析
May 14 Javascript
JavaScript实现背景自动切换小案例
Sep 27 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
配置支持SSI
2006/11/25 PHP
php常用表单验证类用法实例
2015/06/18 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
layui table 参数设置方法
2018/08/14 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
AUC计算方法与Python实现代码
2020/02/28 Python
会计实习期自我鉴定
2013/10/06 职场文书
终端业务员岗位职责
2013/11/27 职场文书
市场部专员岗位职责
2013/11/30 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
共产党员公开承诺书
2014/03/25 职场文书
工程质量承诺书
2014/03/27 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
我的收音机情缘
2022/04/05 无线电
Java 多线程协作作业之信号同步
2022/05/11 Java/Android
Django框架模板用法详解
2022/06/10 Python