当前位置：首页 > article >正文

制作简单的下拉悬停菜单的导航栏

article 2024/11/5 11:44:50

捋清楚导航栏结构

		<!-- 背景栏 -->
		<div id="menu">
			<!-- 使一级菜单在页面居中显示 -->
			<div id="box">
				<div id="First_menu">首页</div>
				
				<div id="First_menu">学校概况
					<div id="Secondary_menu">
						<div>学校标识</div>
						<div>学校简介</div>
						<div>学校领导</div>
						<div>校园风光</div>
					</div>
				</div>

				<div id="First_menu">机构设置
					<div id="Secondary_menu">
						<div>教学单位</div>
						<div>职能部门</div>
					</div>
				</div>

				<div id="First_menu">教育教学</div>

				<div id="First_menu">招生就业
					<div id="Secondary_menu">
						<div>招生</div>
						<div>就业</div>
					</div>
				</div>

				<div id="First_menu">人才建设
					<div id="Secondary_menu">
						<div>人才培训</div>
						<div>人才引进</div>
						<div>干部学院</div>
					</div>
				</div>

				<div id="First_menu">国际交流
					<div id="Secondary_menu">
						<div>友好往来</div>
					</div>
				</div>

				<div id="First_menu">数字中心
					<div id="Secondary_menu">
						<div>校园网</div>
					</div>
				</div>
			</div>
		</div>

采用四层结构，依次作用
最外层作为导航栏的背景
里二层容纳导航栏的一级菜单，方便调整导航栏的位置
内两层作为导航栏的主体内容

明确页面效果

我们想要的效果是：当鼠标悬停在一级菜单时，显示出对应的二级菜单内容；通常情况下，二级菜单被隐藏
本文内使用对比度高的三种颜色，使菜单内容、 CSS 效果更加明显

制作一级菜单效果

一级菜单需要在页面的顶部且内容居中显示

			* {
				margin: 0px;
				padding: 0px;
				font-size: 20px;
			}
			
			#menu {
				width:100%;
				height:30px;
				background-color: red;
			}
			
			#box {
				/* 根据一级菜单数量变化 */
				width:800px;
				margin: auto;
			}
			
			#First_menu {
				font-family: 'fangsong';
				float:left;
				width: 100px;
				line-height: 30px;
				color: white;
				position: relative;
				text-align: center;
			}

*：

重置页面的内边距和外边距，避免在不同浏览器效果不一致

#box：

将背景栏占据整个页面的最上方
而宽度可以根据导航栏的数量进行适当调整，
背景色为红色

#First_menu：

设置字体为宋体
使导航内容在一行内显示，并向左对齐
给导航栏相同的宽度
使文字垂直方向上居中，更加美观
设置字体颜色为白色，即使页面是黑色，也能显示导航栏内容
采用相对定位，遵循子绝父相的原则
使文字水平方向上居中，更加美观

对应效果

此时，当鼠标滑过导航栏时，是没有二级菜单显示的
在这里插入图片描述

二级菜单效果

通常情况下，二级菜单被隐藏，只有一级菜单被鼠标悬停时，才显示出来

			#First_menu:hover {
				background-color: green;
			}
			
			#Secondary_menu {
				display: none;
			}
			
			#First_menu:hover > #Secondary_menu {
				/* 继承父标签的 font-family、width、line-height、color、text-align 属性*/
				display: block;
				background-color: blue;
				position: absolute;
				width: 100px;
				top: 30px;
			}

#First_menu:hover：
使用伪类选择器，当一级菜单被鼠标悬停时，展示的效果