带动画效果的下拉菜单
这个效果好久都想做的，但是能力有限。今天看到一个动画实例受到启发，就把它做出来了。
它能够适应下拉菜单的高度，可能还不那么完善。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
5 <title></title>
6 <style type="text/css">
7 * { margin:0; padding:0; }
8 ul { list-style:none; }
9 #menu { background:#eee; border-radius:5px; border:#ccc solid 1px; width:200px; margin:50px auto; font-size:12px; }
10 #menu dt { background:#ddd; height:30px; line-height:30px; padding-left:10px; font-weight:bold; border-bottom:#ccc solid 1px; cursor:pointer; }
11 #menu dd { overflow:hidden; }
12 #menu dd ul { padding-bottom:5px; }
13 #menu li { padding-left:10px; line-height:20px; height:20px; color:#333; }
14 </style>
15 </head>
16 <body>
17 <dl id="menu">
18 <dt>基础保养</dt>
19 <dd>
20 <ul>
21 <li>面霜</li>
22 <li>乳液</li>
23 <li>凝露</li>
24 <li>精华</li>
25 <li>原液</li>
26 <li>面膜</li>
27 </ul>
28 </dd>
29 <dt>肌肤需求</dt>
30 <dd class="none">
31 <ul>
32 <li>美白抗氧</li>
33 <li>保湿补水</li>
34 <li>祛痘除印</li>
35 <li>紧肤抗衰</li>
36 <li>淡斑祛疤</li>
37 <li>黑头毛孔</li>
38 <li>美白抗氧</li>
39 <li>保湿补水</li>
40 <li>祛痘除印</li>
41 </ul>
42 </dd>
43 <dt>适用人群</dt>
44 <dd class="none">
45 <ul>
46 <li>青春少女</li>
47 <li>职业女性</li>
48 <li>精致女人</li>
49 <li>干性肌肤</li>
50 <li>油性肌肤</li>
51 <li>敏感肌肤</li>
52 </ul>
53 </dd>
54 </dl>
55 <script type="text/javascript">
56 var oDt = document.getElementById("menu").getElementsByTagName("dt");
57 var oDd = document.getElementById("menu").getElementsByTagName("dd");
58 var ddHeight = [];
59 var timer = null;
60 for(var i=0; i<oDd.length; i++) {
61 ddHeight.push(oDd[i].offsetHeight);
62 if(oDd[i].className === "none") {
63 oDd[i].style.height = 0 + "px";
64 }
65 }
66 for(var i=0; i<oDt.length; i++) {
67 oDt[i].index = i;
68 oDt[i].onclick = showMenu;
69 }
70 function showMenu() {
71 var newHeight = 0;
72 var maxH = ddHeight[this.index];
73 var thisDd = this.nextSibling.nextSibling;
74 if(thisDd.offsetHeight != 0) {
75 return true;
76 }
77 for(var j=0; j<oDd.length; j++) {
78 oDd[j].style.height = 0 + "px";
79 }
80 timer = setInterval(function() {
81 thisDd.style.height = thisDd.offsetHeight + 10 + "px";
82 if(thisDd.offsetHeight >= maxH) {
83 clearInterval(timer);
84 }
85 },20);
86 }
87 </script>
88 </body>
89 </html>转载于:https://www.cnblogs.com/ecren/archive/2012/05/14/2499108.html
带动画效果的下拉菜单相关推荐
- 三星二级菜单_Excel 如何设计带联想的二级下拉菜单？
在百度搜索网站中输入搜索关键词时,百度会逐步弹出相关的词条列表.例如,输入"三"会弹出包含"三国杀"."三维度"之类的词条列表,而输入&qu ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
- 【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性 展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
- vba有下拉框的模糊查找_输入快10倍，带模糊查找的Excel下拉菜单来了！
在Excel表格中设置下拉菜单很简单,但带模糊查询的你见过吗?兰色做了一个,先睹为快: 估计会有同学说兰色是用VBA做的. No! 做这样的智能菜单只需要一个辅助公式即可. 制作步骤: 1.设置辅助公 ...
- css下拉菜单出现下划线,简单带下划线跟随效果的CSS3下拉菜单特效
简要教程 这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效.该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果. 使用方法 HTML结构 该下 ...
- 用php完成下拉菜单,最新的8个实现下拉菜单功能的总结
在计算机应用中,下拉式选单是选单的一种表现形式.具体表现为:当用户选中一个选项后,该选单会向下延伸出具有其他选项的另一个选单.下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中,并把这 ...
- 10个优秀的 HTML5 CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- html中按钮下拉菜单,CSS 下拉菜单
CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 文本下拉菜单 菜鸟教程 www.runoob.com 实例演示 2 实例演示 3 学的不仅是技术 ...
- boootstap-面包屑-下拉菜单
>路径导航 效果 代码 breadcrumb,面包渣 有利于seo的优化,爬虫喜欢 >下拉菜单 效果 结构 下拉菜单与菜单的内容 包在一个容器中 关注,无data-target,如何产生关 ...
最新文章
- 懒加载实现的分页网站footer自适应
- 检查oracle安装,oracle安装前环境检查
- ffmpeg text relocations
- python零基础怎么学-零基础的小白怎么学python？
- 基于Simulink的高速跳频通信系统抗干扰性能分析
- 运用@media实现网页自适应中的几个关键分辨率
- 【Leaflet】鼠标提取坐标
- 使用for及递归求 1-100的和
- 2019春季学期第四周作业
- 我爱Java系列---【EL和JSTL】
- unity 3d换装之 SkinMeshRenderer
- captap生成验证码
- Mysql常见的引擎
- 学会计为什么要学计算机基础,会计专业学生为什么要学数据库
- xshell官网最新 中文,xshell
- 量化投资_期货日内交易的波动率思考
- [失败]uuv_simulator在台式机_虚拟环境下会崩溃的问题[失败]
- 【转载】JavaScript进阶问题列表
- 在Js和Java自动生成账号的方法
- 鞋长度和欧美的标准宽度换算表