精美滑动式折叠菜单(Slashdots Menu)
- 作者：佚名 来源：互联网 文章点击数：
<!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" />
<meta name="keywords" content="Javascript, 折叠, 动画, 菜单, 滑动, " />
<meta name="description" content="折叠菜单让你在尽可能小的地方放置尽可能多的内容，同时加大了操作的简便性，因此，深受前台设计师的喜爱。随着大家对动画效果的钟爱，折叠菜单也开始“动”起来了，本文介绍的就是 DimX 制作的滑动式折叠菜单效果－Slashdot's Menu。" />
<title>滑动式折叠菜单 － Slashdot's Menu - Javascript, 折叠, 动画, 菜单, 滑动, </title>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
<body>
<div id="example">
<h3 id="example_title">滑动式折叠菜单 － Slashdot's Menu</h3>
<div id="example_main">
<!--************************************* 实例代码开始 *************************************-->
<link rel="stylesheet" type="text/css" href="sdmenu.css" />
<script type="text/javascript" src="sdmenu.js"></script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
<div style="height:600px">
<form action="#" onsubmit="return false">
<fieldset><legend>Menu actions</legend>
<label for="speed">速度 (1-5):</label>
<input type="text" id="speed" value="3" size="1" onchange="myMenu.speed = parseInt(this.value)" />
<label for="oneSmOnly">一次只展开一个菜单:</label>
<select id="oneSmOnly" onchange="myMenu.oneSmOnly = this.selectedIndex"><option>false</option><option>true</option></select>
<select name="smNr"><option>1</option><option>2</option><option>3</option><option>4</option></select>
<input type="button" value="展开" onclick="myMenu.expandMenu(myMenu.submenus[smNr.selectedIndex])" />
<input type="button" value="关闭" onclick="myMenu.collapseMenu(myMenu.submenus[smNr.selectedIndex])" />
<input type="button" value="切换" onclick="myMenu.toggleMenu(myMenu.submenus[smNr.selectedIndex])" />
<input type="button" value="展开所有" onclick="myMenu.expandAll()" />
<input type="button" value="关闭所有" onclick="myMenu.collapseAll()" />
</fieldset>
</form>
<br style="clear:both;" />
<div style="float: left" id="my_menu" class="sdmenu">
<div>
<span>网站运营</span>
<a href="http://www.syku.net/article/exp">建站经验</a>
<a href="http://www.syku.net/article/plan">策划盈利</a>
<a href="http://www.syku.net/article/story">站长聊吧</a>
</div>
<div>
<span>建站实务</span>
<a href="http://www.syku.net/myweb/jzzn">建站准备</a>
<a href="http://www.syku.net/myweb/script">精选代码</a>
</div>
<div class="collapsed">
<span>设计之窗</span>
<a href="http://www.syku.net/design/photoshop">photoshop</a>
<a href="http://www.syku.net/design/Firework">Firework</a>
</div>
<div>
<span>当前菜单高亮</span>
<a href="#">高亮测试一</a>
<a href="#">高亮测试二</a>
<a href="#">高亮测试三</a>
</div>
</div>
</div>
<br style="clear:both;" />
<br />
<!--************************************* 实例代码结束 *************************************-->
</div></div>
</html>
- 相关文章
| ·仿windows选项卡效果拾零 | 07-15 |
| ·符合Firefox的,以图片代替滚动条效果 | 07-14 |
| ·模仿JQ的UI-TAB控件,兼容多浏览器 | 07-12 |
| ·一个背景变暗的div可拖动提示窗口，兼容IE、Firefox、 | 07-11 |
| ·非常不错的一个DIV+CSS客齐集的导航特效 | 07-10 |
| ·非常经典的不用图片实现圆角代码 | 07-09 |
| ·如何实现浏览器上的右键菜单 | 07-08 |
| ·网页中实用的中英文日历网页特效代码 | 07-07 |
