html中关于侧边导航栏和导航栏的编写

本文介绍: 关于侧边导航栏和下拉菜单纯css编写

<style>
		.box{
			width: 50px;
			height: 50px;
			background-color: #483957;
			transition: width .5s,background-color .2s;
		}
		.box:hover{
			background-color: #004FCB;
			width: 200px;
			cursor: pointer;
		}
		.a1{
			position: fixed;
			right: 40px;
			top: 200px;
			float: right;
		}
	</style>

其中box属性中transition: width .5s,background-color .2s;表示动画效果。.box:hover鼠标移入事件改变背景颜色，宽度，鼠标变成小手。.a1中对其进行绝对定位，使其固定在屏幕的某个地方。

<div class="box a1"></div>

最后只需在在body中使用div即可完成一个简单的侧边导航栏。
请添加图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>css侧边菜单</title>
	<style>
		/* css reset */
		* {
			margin: 0;
			padding: 0;
		}
		
		.box1 {
			/*设置了第一个div的宽度高度和背景色*/
			align-content: center;
			width: 100%;
			height: 50px;
			background-color: rgb(90, 149, 222);
		}
		
		
		.box2 {
			/*设置定位为相对定位宽度可以根据内容进行调整，注意在这不要使用百分比，
			最后水平居中*/
			position: relative;
			width: 1200px;
			margin: auto;
		}
		
		.menu ul {
			/*nav的属性，在这取消无序列表的标*/
			list-style-type: none;
		}
		
		.menu ul > li {
			/*设置li为左浮动，使列表项在一行*/
			float: left;
		}
		
		.menu a {
			/*对a标签进行主要的效果设置 display: inline-block取消下划线*/
			text-decoration: none;
			color: #fff;
			background-color: rgb(90, 149, 222);
			width: 160px;
			height: 50px;
			display: inline-block;
			text-align: center;
			line-height: 50px;
		}
		
		.menu a:hover {
			/*鼠标移入事件,1s改变背景色*/
			background-color: rgb(26, 102, 196);
			transition: background-color 1s;
		}
		
		.submenu {
			/*设置二级菜单隐藏效果*/
			width: 160px;
			display: none;
		}
		
		.menu > ul > li:hover .submenu {
			/*二级菜单在鼠标移入时打开,设置绝对定位*/
			display: block;
			position: absolute;
		}
		
		nav > ul > li.line {
			/*设置中间的效果线的*/
			width: 1px;
			height: 50px;
			opacity: .5
		}
		
		nav > ul > li.one {
			/*设置渐变效果*/
			background-image: linear-gradient(rgba(0, 0, 0, 0),
			rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
		}
		
		nav > ul > li.two {
			background-image: linear-gradient(rgba(255, 255, 255,
			0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
		}
		
		
		.box3 {
			clear: none;
		}
	</style>
</head>
<body>
<div class="box1">
	<div class="box2">
		<nav class="menu">
			<ul>
				<li><a href="">首页</a></li>
				<li class="line one"></li>
				<li class="line two"></li>
				<li><a href="">产品中心</a>
					<ul class="submenu">
						<li><a href="">台式电脑</a></li>
						<li><a href="">产品三五</a></li>
						<li><a href="">产品没玩</a></li>
						<li><a href="">产品电脑</a></li>
						<li><a href="">产品美工</a></li>
					</ul>
				</li>
				<li class="line one"></li>
				<li class="line two"></li>
				<li><a href="">联络方式</a>
					<ul class="submenu">
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
					</ul>
				</li>
				<li class="line one"></li>
				<li class="line two"></li>
				<li><a href="">客户服务1</a>
					<ul class="submenu">
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
					</ul>
				</li>
				<li class="line one"></li>
				<li class="line two"></li>
				<li><a href="">客户服务2</a>
					<ul class="submenu">
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
					</ul>
				</li>
				<li class="line one"></li>
				<li class="line two"></li>
				<li><a href="">客户服务3</a>
					<ul class="submenu">
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
					</ul>
				</li>
				<li class="line one"></li>
				<li class="line two"></li>
				<li><a href="">客户服务4</a>
					<ul class="submenu">
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
						<li><a href="">Lorem</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</div>
<div class="box3">
	<p>Lorem ipsum dolor sit amet, consectetur.</p>
	<p>Blanditiis delectus labore quia quisquam voluptatem.</p>
</div>
</body>
</html>