左中侧导航栏组件

程序员文章站 2022-06-18 11:10:45

...

左中侧导航栏组件 2018.1.11 21:35pm

左中侧效果：

左中侧导航栏组件

可直接使用

<!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>

左中侧导航栏组件

xcode 左边导航栏中符合含义详解

Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

iOS中的导航栏UINavigationBar与工具栏UIToolBar要点解析

详解Vue底部导航栏组件

iOS App开发中UISearchBar搜索栏组件的基本用法整理

iOS中的导航栏UINavigationBar与工具栏UIToolBar要点解析

iOS App开发中UISearchBar搜索栏组件的基本用法整理

详解Vue底部导航栏组件

android中Fragment+RadioButton实现底部导航栏

写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab