CSS之常见页面导航栏设计思路

页面导航栏设计思路

温馨提示：

本文基于常见的导航栏：Logo+导航内容栏

导航栏整体

使用div标签作为容器

• 首先，要为整个导航栏部分定义宽高weight/height样式
• 其次，要考虑容器内的项目为横向排列，这里有三个方法
  • 改变元素类型：子项目div标签赋予属性display:inline-block，使子项目具有行内元素的特性，进行横向排列
  • 添加浮动属性：子项目div标签赋予属性float:left，使子项目能够脱离文档流进行浮动，但还要考虑浮动可能导致的父容器高度塌陷，需要进行消除浮动，此方法好理解，但灵活性较差
  • Flex-box布局：给容器div标签赋予属性dispaly:flex，这样子项目由于弹性盒子布局的特性，进行横向排列，下面以此为例进行介绍

下面是一个示例：

/* 导航栏样式 */
.header {
	height: 80px;
	width: 100%;
	display: flex;
	background-color: whitesmoke;
}

左侧Logo部分

这部分使用div标签作为容器

• 为整体容器设置合适的宽高，高度常与父容器一致

• 添加子项目img标签

  • 可为img标签或div标签添加宽高、内外边距属性的方法，对图片Logo位置进行微调

• 在一些响应式的Logo部分，也可以用精灵图的方法进行设计

  • 以精灵图独特的定位方式，触发响应条件后改变精灵图的参数

下面是一个示例：

/* 导航栏LOGO */
.header .left {
	width: 120px;
	height: 80px;
	margin-left: 10px;
}

.header .left img {
	width: 110px;
}

右侧Content菜单栏部分

这部分使用div标签作为容器

• 首先，构建右侧菜单栏容器的属性
  • 高度常与父容器高度一致，内容行高与父容器高度一致，以便进行后续布局
  • 由于父容器为Flex布局，右侧菜单栏常需要填满整个容器剩余部分，故设置属性flex-grow=1
  • 为便于进行菜单栏的布局，也把此菜单栏设为弹性盒子display:flex
• 接着，创建菜单栏容器内的内容，常使用无序列表ul
  • 首先定义此无序列表样式list-style=none，使其无前缀无序序号
  • 由于父容器为Flex，可设置属性align-content:center实现垂直居中的效果
  • 可添加内外边距对位置进行微调
• 无序列表ul内的子项目li
  • 设置合适的宽高
  • 使用浮动float:left使其在ul中横向排列
  • 在菜单栏内容部分仍需要一些丰富的样式时，可以将li也添加属性display:flex，然后添加属性align-items:center，justify-content使li内的内容垂直水平居中
  • 可添加内外边距对位置进行微调
• li内的项目常有a标签和span标签，这里不同的导航栏对其需求不同，故不再赘述，但他们的样式设计万变都不离其宗，这里常用的就有下拉栏创建方式和伪类选择器

下面是一个示例：

/* 导航栏内容 */
.header .right {
	height: 80px;
	line-height: 80px;
	flex-grow: 1;
	display: flex;
}

.header > .right > ul {
	/* float: left; */
	align-content: center;
	margin-left: 20px;
}

.header .right > ul > li {
	float: left;
	width: 110px;
	height: 53px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 20px;
	/* border: 1px solid RGB(195, 13, 35); */
	border-radius: 7px;
	position: relative;
}

.header .right > ul > li > a {
	text-decoration: none;
	color: black;
}

.header .right > ul > li > .drop {
	display: none;
	width: 110px;
	position: absolute;
	top: 53px;
	height: auto;
}

.header .right > ul > li > .drop > a {
	display: block;
	text-decoration: none;
	background-color: rgb(244, 237, 237);
	color: black;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header .right > ul > li > .drop > a:hover {
	background-color: RGB(25, 25, 26);
	color: azure;
	cursor: pointer;
}

.header .right > ul > li > span {
	display: inline-block;
}

.header .right li:hover {
	background-color: RGB(195, 13, 35);
	color: azure;
	cursor: pointer;
}

.header .right li:hover > a {
	color: azure;
}

.header .right li:hover > .drop {
	display: block;
}

.header .right li:nth-of-type(2):hover {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.header .right li:nth-of-type(3):hover {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.header .right li:nth-of-type(4):hover {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}