Web 学习之侧边隐藏菜单栏

最新推荐文章于 2024-08-03 17:33:50 发布

菇毒

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量1.3k

点赞数 3

分类专栏： web 前端学习文章标签：前端 css JavaScript html

本文链接：https://blog.csdn.net/weixin_43960383/article/details/121764586

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

侧边隐藏菜单栏

1. 样式部分（style）
2. 主体部分（body）
3. JavaScript部分（script）
4. 重点
- 4.1 css样式部分
- - 4.1.1 禁用一级菜单的浮动
  - 4.1.2 挪动二级菜单出现的位置
完整代码如下所示

1. 样式部分（style）

	*{
				margin: 0;
				padding: 0;
			}
			.menu {
				position: relative;
				z-index: 100;
			}
			.menu ul li{
				font-size: 14px;
				list-style: none;
				/* float: left; */		/*禁用一级菜单*/
				position: relative;
				width: 150px;height: 30px;
				background: #FF00FF;
				line-height: 30px;
				text-align: center;		/*文本样式居中*/
				margin-left: 5px;		/*外边距5*/
			}
			.menu ul li a:hover{
				background: #FF0000;	/*设置背景颜色，或背景图片*/
			}
			.menu ul li ul{
				display: none;			/*不显示子菜单*/
			}
			.menu ul li ul li {
				font-size: 15px;		/*字体大小*/
				float: none;			/*浮动取消*/
				position: relative;		/*相对位置*/
				margin-left: 150px;
			}
			.menu ul li a{
				display: block;		/*块状显示*/
				text-decoration: none;	/*去掉下划线*/
				
			}
			.menu u li ul li a:hover{
				border: 0;		/*边框为0*/
				border-bottom: 1px solid #000;	/*底部边框为1，实现，黑色*/
				background-color: #FFf;		/*背景颜色，黄色*/
			}

2. 主体部分（body）

		<div class="menu">
			<ul>
				<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
					<a href="#">栏目1</a>
					<ul>
						<li><a href="#">菜单11</a></li>
						<li><a href="#">菜单12</a></li>
						<li><a href="#">菜单13</a></li>
					</ul>
				</li>
				<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
					<a href="#">栏目2</a>
					<ul>
						<li><a href="#">菜单21</a></li>
						<li><a href="#">菜单22</a></li>
						<li><a href="#">菜单23</a></li>
					</ul>
				</li>	
			</ul>
		</div>

3. JavaScript部分（script）

	<script>
		function displaySubMenu(li){
			var s= li.getElementsByTagName("ul")[0];
			s.style.display="block";
		}
		function hideSubMenu(li){
			var s=li.getElementsByTagName("ul")[0];
			s.style.display="none";
		}
	</script>

4. 重点

4.1 css样式部分

4.1.1 禁用一级菜单的浮动

.menu ul li{
				font-size: 14px;
				list-style: none;
				/* float: left; */		/*禁用一级菜单*/
				position: relative;
				width: 150px;height: 30px;
				background: #FF00FF;
				line-height: 30px;
				text-align: center;		/*文本样式居中*/
				margin-left: 5px;		/*外边距5*/
			}

4.1.2 挪动二级菜单出现的位置

.menu ul li ul li {
				font-size: 15px;		/*字体大小*/
				float: none;			/*浮动取消*/
				position: relative;		/*相对位置*/
				margin-left: 150px;		/*挪动二级菜单出现的位置*/
			}

完整代码如下所示

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.menu {
				position: relative;
				z-index: 100;
			}
			.menu ul li{
				font-size: 14px;
				list-style: none;
				/* float: left; */		/*禁用一级菜单*/
				position: relative;
				width: 150px;height: 30px;
				background: #FF00FF;
				line-height: 30px;
				text-align: center;		/*文本样式居中*/
				margin-left: 5px;		/*外边距5*/
			}
			.menu ul li a:hover{
				background: #FF0000;	/*设置背景颜色，或背景图片*/
			}
			.menu ul li ul{
				display: none;			/*不显示子菜单*/
			}
			.menu ul li ul li {
				font-size: 15px;		/*字体大小*/
				float: none;			/*浮动取消*/
				position: relative;		/*相对位置*/
				margin-left: 150px;
			}
			.menu ul li a{
				display: block;		/*块状显示*/
				text-decoration: none;	/*去掉下划线*/
				
			}
			.menu u li ul li a:hover{
				border: 0;		/*边框为0*/
				border-bottom: 1px solid #000;	/*底部边框为1，实现，黑色*/
				background-color: #FFf;		/*背景颜色，黄色*/
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<ul>
				<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
					<a href="#">栏目1</a>
					<ul>
						<li><a href="#">菜单11</a></li>
						<li><a href="#">菜单12</a></li>
						<li><a href="#">菜单13</a></li>
					</ul>
				</li>
				<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
					<a href="#">栏目2</a>
					<ul>
						<li><a href="#">菜单21</a></li>
						<li><a href="#">菜单22</a></li>
						<li><a href="#">菜单23</a></li>
					</ul>
				</li>	
			</ul>
		</div>
	</body>
	<script>
		function displaySubMenu(li){
			var s= li.getElementsByTagName("ul")[0];
			s.style.display="block";
		}
		function hideSubMenu(li){
			var s=li.getElementsByTagName("ul")[0];
			s.style.display="none";
		}
	</script>
</html>