JQ之实现后台管理的基本布局和部分动画

桃扇骨 2022-05-15 14:09 169阅读 0赞

# 1：效果图 #

效果：

1：侧边导航的手风琴效果

2：部分页面切换效果（点击用户管理，不需要刷新）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70][]

# 2：代码部分 #

注：三个页面复制到一个项目里，可以直接运行看效果

**  index.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>后台布局</title>
    		<style type="text/css">
    			/* 清除默认reset */
    			body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
    			form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
    			input,select{font-size:12px;line-height:16px;}
    			img{border:0;}
    			ul,li{list-style-type:none;}
    			a {color:#00007F;text-decoration:none;}
    			a:hover {color:#bd0a01;text-decoration: none;}
    			/* reset   end*/
    			
    			/*1:头部*/
    			.header{
    		            height: 70px;
    		            width: 100%;
    		            background: #000000;
    		            color: #FFF;
    		    }
    			/*2:左边导航*/
    			.nav{
    			    width:20%;
    				height: 100%;
    				background-color: #123456;
    				 position: fixed;
    			}
    			
    			/*3:右边内容区*/
    			.content{
    				position: fixed;
    				width: 75%;
    				margin-left: 25%;
    				height: 100%;
    				background-color: #EBF3F8;
    			}
    			
    			/*右边内容区的上*/
    			.content iframe{
    				width: 100%;
    				height: 70%;
    				background-color: #42556B;
    			}
    			/*右边内容区的下*/
    			.content .footer{
    				position: absolute;
    				/*相对于content定位*/
    				bottom: 0;
    				width: 100%;
    				height: 25%;	
    				background-color: #3A6D8C;
    			}
    			 
    			/*左边导航的菜单*/
    			.menu{
    				overflow:hidden;
    			    /*border:1px solid #123456;*/
    			}
    			/* 第一层 */
    			.menu li.level1 a{
    			    display: block;
    			    height: 38px;
    			    line-height: 38px;
    			    background:#123456;
    				font-weight:700;
    				font-size: 16px;
    			    color: #fff;
    				text-indent: 10px;
    				border-top: 1px solid #000;
    			}
    			.menu li.level1 a:hover{background:#42556B ;}
    			.menu li.level1 a.current{background:#42556B;}
    			 
    			 /*第二层*/
    			.menu li ul{overflow:hidden;}
    			.menu li ul.level2{display:none;}
    			.menu li ul.level2 li a{
    			    display: block;
    			    height: 28px;
    			    line-height: 28px;
    			    background:#ffffff;
    				font-weight:400;
    			    color: #42556B;
    				text-indent: 18px;
    				border-top: 0px solid #ffffff;
    			    overflow: hidden;
    			}
    			.menu li ul.level2 li a:hover{
    				color:#f60;
    			}
    		</style>
    
    		<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
    		<script type="text/javascript">
    		//等待dom元素加载完毕.
    		$(document).ready(function(){
    			//	左边导航栏动画
    			$(".level1 > a").click(function(){
    				$(this).addClass("current")   //给当前元素添加"current"样式
    				.next().show(500)   //下一个元素显示
    				.parent().siblings().children("a").removeClass("current")//父元素的兄弟元素的子元素<a>移除"current"样式
    				.next().hide(500);   //它们的下一个元素隐藏
    				return false;
    			});
    		});
    		</script>
    		
    		</head>
    	<body>
    		
    		 <header class="header">
    		       <h1>我是头部</h1>
    		 </header>
    		 
    		
    		<div class="nav">
    			<ul class="menu">
    				<li class="level1">		
    					<a href="#none">我是选项一</a>
    					<ul class="level2">
    						
    						<li><a href="user.html" target="contentWrapper">用户管理</a></li>
    						<li><a href="#none">角色管理</a></li>
    						<li><a href="#none">其他管理</a></li>
    					</ul>
    				</li>
    				<li class="level1">
    					<a href="#none">我是选项二</a>
    					<ul class="level2">
    						<li><a href="#none">其他</a></li>
    						<li><a href="#none">其他</a></li>
    						<li><a href="#none">其他</a></li>
    					</ul>
    				</li>
    				<li class="level1">
    					<a href="#none">我是选项三</a>
    					<ul class="level2">
    						<li><a href="#none">其他</a></li>
    						<li><a href="#none">其他</a></li>
    						<li><a href="#none">其他</a></li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    		
    		
    		<div class="content">
    			
    			<iframe name="contentWrapper" src="default.html" frameborder="no"  marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
    			
    			<footer class="footer">
    				<h1>我是尾部</h1>
    			</footer>
    		</div>
    		
    	
    	</body>
    </html>

default.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<h1>我是默认页面</h1>
    	</body>
    </html>

user.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<h1>我是无刷新用户管理页面</h1>
    	</body>
    </html>

注: 第一次尝试，不喜勿愤

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70]: /images/20220503/c155726f20bf44358479a1db10006b08.png