二级菜单.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; text-decoration: none; } body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; } </style> <link rel="stylesheet" type="text/css" href="sdmenu.css" /> <script type="text/javascript" src="tools.js"></script> <script type="text/javascript"> window.onload = function () { /* * 我们的每一个菜单都是一个div * 当div具有collapsed这个类时，div就是折叠的状态 * 当div没有这个类是，div就是展开的状态 */ /* * 点击菜单，切换菜单的显示状态 */ //获取所有的class为menuSpan的元素 var menuSpan = document.querySelectorAll(".menuSpan"); //定义一个变量，来保存当前打开的菜单 var openDiv = menuSpan[0].parentNode; //为span绑定单击响应函数 for (var i = 0; i < menuSpan.length; i++) { menuSpan[i].onclick = function () { //this代表我当前点击的span //获取当前span的父元素 var parentDiv = this.parentNode; //切换菜单的显示状态 toggleMenu(parentDiv); //判断openDiv和parentDiv是否相同 if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) { //打开菜单以后，应该关闭之前打开的菜单 //为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass //addClass(openDiv , "collapsed"); //此处toggleClass()不需要有移除的功能 //toggleClass(openDiv , "collapsed"); //切换菜单的显示状态 toggleMenu(openDiv); } //修改openDiv为当前打开的菜单 openDiv = parentDiv; }; } /* * 用来切换菜单折叠和显示状态 */ function toggleMenu(obj) { //在切换类之前，获取元素的高度 var begin = obj.offsetHeight; //切换parentDiv的显示 toggleClass(obj, "collapsed"); //在切换类之后获取一个高度 var end = obj.offsetHeight; //console.log("begin = "+begin +" , end = "+end); //动画效果就是将高度从begin向end过渡 //将元素的高度重置为begin obj.style.height = begin + "px"; //执行动画，从bengin向end过渡 move(obj, "height", end, 10, function () { //动画执行完毕，内联样式已经没有存在的意义了，删除之 obj.style.height = ""; }); } }; </script> </head> <body> <div id="my_menu" class="sdmenu"> <div> <span class="menuSpan">在线工具</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">htaccess密码</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">推荐我们</a> <a href="#">链接我们</a> <a href="#">网络资源</a> </div> <div class="collapsed"> <span class="menuSpan">合作伙伴</span> <a href="#">JavaScript工具包</a> <a href="#">CSS驱动</a> <a href="#">CodingForums</a> <a href="#">CSS例子</a> </div> <div class="collapsed"> <span class="menuSpan">测试电流</span> <a href="#">Current or not</a> <a href="#">Current or not</a> <a href="#">Current or not</a> <a href="#">Current or not</a> </div> </div> </body> </html>
sdmenu.css
@charset "utf-8"; /* sdmenu */ div.sdmenu { width: 150px; margin: 0 auto; font-family: Arial, sans-serif; font-size: 12px; padding-bottom: 10px; background: url(bottom.gif) no-repeat right bottom; color: #fff; } div.sdmenu div { background: url(title.gif) repeat-x; overflow: hidden; } div.sdmenu div:first-child { background: url(toptitle.gif) no-repeat; } div.sdmenu div.collapsed { height: 25px; } div.sdmenu div span { display: block; height: 15px; line-height: 15px; overflow: hidden; padding: 5px 25px; font-weight: bold; color: white; background: url(expanded.gif) no-repeat 10px center; cursor: pointer; border-bottom: 1px solid #ddd; } div.sdmenu div.collapsed span { background-image: url(collapsed.gif); } div.sdmenu div a { padding: 5px 10px; background: #eee; display: block; border-bottom: 1px solid #ddd; color: #066; } div.sdmenu div a.current { background: #ccc; } div.sdmenu div a:hover { background: #066 url(linkarrow.gif) no-repeat right center; color: #fff; text-decoration: none; }
tools.js
//尝试创建一个可以执行简单动画的函数 /* * 参数： * obj:要执行动画的对象 * attr:要执行动画的样式，比如：left top width height * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) * callback:回调函数，这个函数将会在动画执行完毕以后执行 */ function move(obj, attr, target, speed, callback) { //关闭上一个定时器 clearInterval(obj.timer); //获取元素目前的位置 var current = parseInt(getStyle(obj, attr)); //判断速度的正负值 //如果从0 向 800移动，则speed为正 //如果从800向0移动，则speed为负 if(current > target) { //此时速度应为负值 speed = -speed; } //开启一个定时器，用来执行动画效果 //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 obj.timer = setInterval(function() { //获取box1的原来的left值 var oldValue = parseInt(getStyle(obj, attr)); //在旧值的基础上增加 var newValue = oldValue + speed; //判断newValue是否大于800 //从800 向 0移动 //向左移动时，需要判断newValue是否小于target //向右移动时，需要判断newValue是否大于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { newValue = target; } //将新值设置给box1 obj.style[attr] = newValue + "px"; //当元素移动到0px时，使其停止执行动画 if(newValue == target) { //达到目标，关闭定时器 clearInterval(obj.timer); //动画执行完毕，调用回调函数 callback && callback(); } }, 30); } /* * 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj, name) { if(window.getComputedStyle) { //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj, null)[name]; } else { //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } } //定义一个函数，用来向一个元素中添加指定的class属性值 /* * 参数: * obj 要添加class属性的元素 * cn 要添加的class值 * */ function addClass(obj, cn) { //检查obj中是否含有cn if(!hasClass(obj, cn)) { obj.className += " " + cn; } } /* * 判断一个元素中是否含有指定的class属性值 * 如果有该class，则返回true，没有则返回false * */ function hasClass(obj, cn) { //判断obj中有没有cn class //创建一个正则表达式 //var reg = /b2/; var reg = new RegExp("\b" + cn + "\b"); return reg.test(obj.className); } /* * 删除一个元素中的指定的class属性 */ function removeClass(obj, cn) { //创建一个正则表达式 var reg = new RegExp("\b" + cn + "\b"); //删除class obj.className = obj.className.replace(reg, ""); } /* * toggleClass可以用来切换一个类 * 如果元素中具有该类，则删除 * 如果元素中没有该类，则添加 */ function toggleClass(obj, cn) { //判断obj中是否含有cn if(hasClass(obj, cn)) { //有，则删除 removeClass(obj, cn); } else { //没有，则添加 addClass(obj, cn); } }
bottom.gif
title.gif
toptitle.gif
expanded.gif
collapsed.gif
linkarrow.gif
