用jquery写一个简单的菜单伸缩效果

goby2008

浏览: 603513 次

最近访客更多访客>>

jAmEs_

k-ping

fygday

bill1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jQuery WordPress JavaScript XHTML HTML

<!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" xml:lang="en-us">
<head>
<title>用jquery写一个菜单伸缩效果</title>
<script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
<script>
jQuery(document).ready(function(){
	jQuery("dd:not(:first)").hide();
		jQuery("dt a").click(function(){
		jQuery("dd:visible").slideUp("slow");
		jQuery(this).parent().next().slideDown("slow");
		return false;
	});
});
</script>
<style>
body { font-family: Arial; font-size: 16px; margin: 0 auto; text-align: center; }
dl,dt,dd,ul {margin: 0; padding: 0;}
dl{margin-top: 150px;}
dt { margin-top: 2px;}
dt a {display: block; width: 300px; height: 30px; line-height: 30px;text-align: left; font-size: 18px;  padding-left: 5px; color: #FFF; background: #73C5E5;}
dd {width: 303px; border: 1px solid #73C5E5;}
ul li{list-style: none; padding: 5px; text-align: left; }
</style>
</head>
<body>
<dl>
	<dt><a href="http://leotheme.cn/">jQuery</a></dt>
	<dd>
		<ul>
			<li><a href="http://leotheme.cn/">Download</a></li>
			<li><a href="http://leotheme.cn/">Documentation</a></li>
			<li><a href="http://leotheme.cn/">Blog</a></li>
		</ul>
	</dd>
	<dt><a href="http://leotheme.cn//discuss/">JavaScript</a></dt>
	<dd>
		<ul>
			<li><a href="http://leotheme.cn/">Mailing List</a></li>
			<li><a href="http://leotheme.cn/">Tutorials</a></li>
			<li><a href="http://leotheme.cn/">Demos</a></li>
			<li><a href="http://leotheme.cn/">Plugins</a></li>
		</ul>
	</dd>
	<dt><a href="http://leotheme.cn/">WordPress</a></dt>
	<dd>
		<ul>
			<li><a href="http://leotheme.cn/">Themes</a></li>
			<li><a href="http://leotheme.cn/">plugins</a></li>
			<li><a href="http://leotheme.cn/">languages</a></li>
		</ul>
	</dd>
	<dt><a href="http://leotheme.cn/">Themes</a></dt>
	<dd>
		<ul>
			<li><a href="http://leotheme.cn/">BlueSky</a></li>
			<li><a href="http://leotheme.cn/">Maxthon v2.0</a></li>
			<li><a href="http://leotheme.cn/">simple-line</a></li>
		</ul>
	</dd>
</dl>
</body>
</html>

分享到：

颜色让人感觉很舒服. | css竖向tab

2010-07-19 16:01
浏览 1148
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用jquery写一个简单的菜单伸缩效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用jquery写一个简单的菜单伸缩效果

评论

发表评论

相关推荐

33个jQuery效果实例

jQuery–20个最新的jQuery效果.

jQuery.Switchable 1.0

11个代码高亮的实现方法(转)

用jQuery判断一个元素是否显示

3个jQuery弹出窗口插件

jquery 实现checkbox全选、取消全选

jQuery 实现自动增长的文本输入框

simple tree 添加子树

渐渐消失

jquery设置按钮的disabled属性

jquery常用代码

jquery iframe操作

jquery插件

jquery常用插件

JQuery Block UI V2

jquery资源

关于jQuery的动画制作.

jQuery实现折叠菜单 非常简单

jquery学习笔记

最近访客更多访客>>

jQuery实现折叠菜单非常简单