后台导航菜单的简单实现

中国龙

浏览: 34542 次
性别:
来自: 福建

最近访客更多访客>>

gslovehq

fmbobin

坐在金山上的乞丐

aoyouzi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

网页制作（HTML/PHP/CSS/JAVASCRIPT）

jQuery JavaScript ITeye XHTML CSS

做一个简单的后台导航菜单

这个素材来自其它网站：

http://www.865171.cn/admin-templates/detail-8329.aspx

下载地址：

http://www.865171.cn/admin-templates/download/admin-template-030/admin-templates.rar

我只用了它里面的几张图片和样式，不过比他实现的要简单，样式也简写了很多，仅供学习参考使用！

展示下样图：

导航样图

源代码：

<!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=utf-8" />
	<title>管理管理页面</title>
	<script src="js/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
	<style type="text/css">
		body,div,img,ul,li,a,*{margin: 0px;padding:0px;font:12px Arial,Helvetica,sans-serif,'宋体';}
		body {
			color:#000;
			background-color: #EEF2FB;
		}
		#navigation {
			width: 182px;

		}
		.menuBar {
			font-weight:bold;
			width: 182px;
			cursor: pointer;
			height: 30px;
			line-height: 30px;
			moz-outline-style: none;
			background-image: url(images/navigation/menu_bgS.gif);
			background-repeat: no-repeat;
			text-align: center;
		}
		.menu ul li {
			height: 26px;
			line-height: 26px;
			display: block;
			list-style-type: none;
		}
		.menu ul li a  {
			height: 26px;
			line-height: 26px;
			color: #333333;
			display: block;
			overflow: hidden;
			text-align: center;
			text-decoration: none;
			background-image: url(images/navigation/menu_bg1.gif);
			background-repeat: no-repeat;
		}

		.menu ul li a:hover {
			color: #006600;
			font-weight:bold;
			background-image: url(images/navigation/menu_bg2.gif);
		}
		img{margin:0px; padding:0px;}
	</style>
	<script language="javascript">
		$().ready(function(){
			$('.menu').hide();
			$('.menu:first').slideDown();
			$(".menuBar").click(function(){
				$(this).next().slideToggle();//("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
			})
		});
	</script>
</head>
	<body>
		<div id="navigation">
			<div class="content">
				<div class="menuBar">
					网站常规管理
				</div>
				<div class="menu">
					<img src="images/navigation/menu_topline.gif" width="182" height="5" />
					<ul>
						<li><a href="#" target="main">菜单管理</a></li>
						<li><a href="#" target="main">模块管理</a></li>
						<li><a href="#" target="main">用户管理</a></li>
						<li><a href="#" target="main">日子管理</a></li>
					</ul>
				</div>
				<div class="menuBar">
					商品信息管理
				</div>
				<div class="menu">
					<img src="images/navigation/menu_topline.gif" width="182" height="5" />
					<ul>
						<li><a href="#" target="main">添加货物</a></li>
						<li><a href="#" target="main">查看订单</a></li>
						<li><a href="#" target="main">发货管理</a></li>
						<li><a href="#" target="main">进货管理</a></li>
						<li><a href="#" target="main">订单跟踪</a></li>
						<li><a href="#" target="main">对账报表</a></li>
					</ul>
				</div>
				<div class="menuBar">
					待添加
				</div>
				<div class="menu">
					<img src="images/navigation/menu_topline.gif" width="182" height="5" />
					<ul>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

jQuery下载地址：

http://dl.iteye.com/topics/download/40329d8d-66dd-3af7-8c6b-ca10ad0087d2