jquery网站后台管理系统导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery网站后台管理系统导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta charset="utf-8">
<title>jquery网站后台管理系统导航</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
		$(".div2").click(function(){ 
			$(this).next("div").slideToggle("slow")  
			.siblings(".div3:visible").slideUp("slow");
		});
	});
</script>
<style>
body{ margin:0;font-family:微软雅黑;}
.left{ width:200px; height:100%; border-right:1px solid #CCCCCC ;#FFFFFF; color:#000000; font-size:14px; text-align:center;}
.div1{text-align:center; width:200px; padding-top:10px;}
.div2{height:40px; line-height:40px;cursor: pointer; font-size:13px; position:relative;border-bottom:#ccc 1px dotted;}
.jbsz {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(images/1.png);}
.xwzx {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(images/2.png);}
.zxcp {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(images/4.png);}
.lmtj {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(images/8.png);}
.div3{display: none;cursor:pointer; font-size:13px;}
.div3 ul{margin:0;padding:0;}
.div3 li{ height:30px; line-height:30px; list-style:none; border-bottom:#ccc 1px dotted; text-align:center;}
</style>
</head>
<body>
<div class="left">
<div class="div1">
<div class="left_top"><img src="images/bbb_01.jpg"><img src="images/bbb_02.jpg" id="2"><img src="images/bbb_03.jpg"><img src="images/bbb_04.jpg"> </div>
  <div class="div2"><div class="jbsz"> </div>基本管理</div>
      <div class="div3">
<ul>
		<li> 网站配置</li>
		<li> 管理设置</li>
        <li> 导航菜单</li>
</ul>
  </div>
    <div class="div2"><div class="xwzx"> </div>新闻中心</div>
      <div class="div3">
      <ul>
		<li> 管理文章</li>
		<li> 文章分类</li>
        <li> 添加文章</li>
        </ul>
  </div>
    <div class="div2"><div class="zxcp"> </div>最新产品</div>
      <div class="div3">
      <ul>
		<li>图片管理</li>
		<li> 图片分类</li>
         <li> 添加图片</li>
         </ul>
  </div>
  <div class="div2"><div class="lmtj"> </div> 栏目添加</div>
      <div class="div3">
      <ul>
		<li> 文章系统</li>
		<li> 图片系统</li>
        <li> 添加表单</li>
         <li> 招聘系统</li>
         </ul>
  </div>
</div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)