css+javascript可伸缩二级菜单
一、说一下可伸缩的二级菜单,非常美观,根据需要可适当修改做为侧边栏使用,效果如下图:<div id="my_menu" class="sdmenu">
<div>
<span>一级菜单</span>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
<div>
<span>一级菜单</span>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</div>
二、javascript代码有两段,一段放于</body>上面
<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>
三、另一段在<head></head>部分调用
调用代码:<script src="inc/sdmenu.js" type="text/javascript"></script>
点击上面图片右键另存为扩展名改为.rar即可获得sdmenu.js。
<div>
<span>一级菜单</span>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
<div>
<span>一级菜单</span>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</div>
二、javascript代码有两段,一段放于</body>上面
<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>
三、另一段在<head></head>部分调用
调用代码:<script src="inc/sdmenu.js" type="text/javascript"></script>
点击上面图片右键另存为扩展名改为.rar即可获得sdmenu.js。