左中侧导航栏组件

川长思鸟来 2021-10-09 03:52 340阅读 0赞

![大笑][laugh.gif]2018.1.11 21:35pm

左中侧效果：

![Image 1][]![Image 1][]![Image 1][]![SouthEast][]

可直接使用

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>LeftSidebar</title>
    	<style type="text/css">
    		*{
    			margin:0;
    			padding: 0;
    
    		}
    		.nav{
    			width: 160px;
    			height: auto;
    			position: fixed;
    			left:0;
    			top:50%;
    			/*计算方法：每个行高40*4+1*4(边框宽)负数*/
    			margin-top: -164px;
    			font-family: "Microsoft Yahei";
    			cursor: pointer;
    		}
    		.nav-li{
    			width: 160px;
    			height: 40px;
    			line-height: 40px;
    			color: #fff;
    			text-align: center;
    			background:#333;
    			border: 1px solid #fff;
    			font-size: 16px;
    			position: relative;
    		}
    		.list-2{
    			width: 160px;
    			height: auto;
    			position: absolute;
    			left:160px;
    			top:0;
    			display: none;
    			opacity: 0.9;
    		}
    		.list-2 ul{
    			 width: 160px;
    			 height: auto;
    			 background: #333;
    			 list-style: none;
    
    		}
    		.list-2 ul li{
    			width: 160px;
    			height: 40px;
    			line-height: 40px;
    			color:#d298b2;
    			font-size: 16px;
    			text-align: center;
    
    		}
    		.nav-li:hover .list-2{
    			display: block;
    		}
    		
    	</style>
    </head>
    <body>
    	<div class="nav">
    		<div class="nav-li">
    			<div class="tit">一级栏目</div>
    			<div class="list-2">
    				<ul>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    			   </ul>
    			</div>
    			
    		</div>
    		<div class="nav-li">
    			<div class="tit">一级栏目</div>
    			<div class="list-2">
    				<ul>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    			   </ul>
    			</div>
    		</div>
    		<div class="nav-li">
    			<div class="tit">一级栏目</div>
    			<div class="list-2">
    				<ul>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    			   </ul>
    			</div>
    		</div>
    		<div class="nav-li">
    			<div class="tit">一级栏目</div>
    			<div class="list-2">
    				<ul>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    				<li>二级栏目01</li>
    			   </ul>
    			</div>
    		</div>
    	</div>
    
    </body>
    </html>

[laugh.gif]: /images/20211009/e0e1b00a2c5d42bdaa0d0cdbf8d88963.png
[Image 1]: 
[SouthEast]: /images/20211009/e056dcaf6fa74887b0921aa34b95010d.png