您当前位置：首页 > web前端 > jscript > JavaScript 打造可折叠的伸缩菜单

JavaScript 打造可折叠的伸缩菜单

来源：程序员人生发布时间：2014-01-11 06:39:24 阅读次数：2464次

　　网(LieHuo.Net)教程这一篇主要讲可折叠的自动伸缩下拉菜单。可折叠的自动伸缩下拉菜单适合于最多到二级菜单、菜单数量较多且页面要求比较精致的网站，打开一个菜单的同时另一个菜单就会自动缩回去。

<!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>JavaScript 打造可折叠的伸缩菜单 - LIEHUO.NET</title><script src="http://www.wfuyu.com/uploads/soft/upadmin/zhediecaidan/sdmenu.js" type="text/javascript"></script><link href="http://www.wfuyu.com/uploads/soft/upadmin/zhediecaidan/css.css" rel="stylesheet" type="text/css" /></head><body><div align="center"><div id="my_menu" class="sdmenu"><div><span>一级菜单</span><a href="HTTP://www.wfuyu.com" _fcksavedurl="HTTP://www.wfuyu.com">二级菜单</a><a href="#" _fcksavedurl="#">二级菜单</a><a href="#" _fcksavedurl="#">二级菜单</a></div><div><span>一级菜单</span><a href="HTTP://www.wfuyu.com" _fcksavedurl="HTTP://www.wfuyu.com">二级菜单</a><a href="#" _fcksavedurl="#">二级菜单</a><a href="#" _fcksavedurl="#">二级菜单</a></div><div><span>一级菜单</span><a href="HTTP://www.wfuyu.com" _fcksavedurl="HTTP://www.wfuyu.com">二级菜单</a><a href="#" _fcksavedurl="#">二级菜单</a><a href="#" _fcksavedurl="#">二级菜单</a></div><div><span>一级菜单</span><a href="HTTP://www.wfuyu.com" _fcksavedurl="HTTP://www.wfuyu.com">二级菜单</a><a href="#" _fcksavedurl="#">二级菜单</a><a href="#" _fcksavedurl="#">二级菜单</a></div></div></div></body></html><script type="text/javascript"> // <![CDATA[ var myMenu; window.onload = function() { myMenu = new SDMenu("my_menu"); myMenu.init(); var firstSubmenu = myMenu.submenus[0];myMenu.expandMenu(firstSubmenu); }; // ]]> </script>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 长期使用中型Access数据库的一点经验

下一篇 Access的特点

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点