后台导航菜单的简单实现

中国龙 · 发表于 2013-2-7 23:43:40

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

这个素材来自其它网站：
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

		自动登录	找回密码
密码			立即注册