使用html和CSS实现简单带下拉二级菜单的导航栏
带下拉菜单导航栏的制作
设计原理
菜单栏布局：弹性盒子+列表+超链接
悬浮于窗口：绝对定位
下拉实现：元素y轴缩放
文本部分
使用两个div区分空间，分别为导航栏的背景和内容区域，菜单部分使用列表实现
1
2
3
4
5
| <div class="menu_background">
<div class="menu_area">
<ul class="menu_list"></ul>
</div>
</div>
|
而菜单内容的具体部分，我们使用li标签嵌套a标签实现跳转功能
1
2
3
| <li class="menu_block">
<a class="menu_text_a">一级标签</a>
</li>
|
而下拉的二级菜单则是在这个li中再嵌套一个列表，我们这里使用有序列表和一级菜单进行区分
1
2
3
4
5
6
7
8
| <li class="menu_block">
<a class="menu_text_a">一级标签</a>
<ol class="menu_dropdown_list">
<li class="menu_dropdown_block">
<a class="menu_dropdown_a">二级标签</a>
</li>
</ol>
</li>
|
文本位置调整
因为很多元素默认自带内外边距，种类多了会很麻烦，所以提前将所有元素的内外边距归零，有需要的时候再做调整
1
2
3
4
5
| *
{
padding: 0;
margin: 0;
}
|
首先确定出整个导航栏的背景，使用绝对定位让他相对浏览器窗口固定
1
2
3
4
5
6
7
8
9
| .menu_background
{
background-color: yellow;
position: fixed; // 元素位置设置为绝对定位
width: 100%;
height: 50px;
z-index: 10; // 使导航栏悬浮在内容上方
box-shadow: 0 0 5px 3px rgb(200, 200, 200);
}
|
使用弹性布局将纵向显示的导航栏改为横向，设置列表元素大小填充父元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .menu_area
{
width: 100%; // 填充父元素
height: 100%;
}
.menu_list
{
display: flex; // 显示为弹性布局
list-style: none; // 取消列表表头
height: 100%;
}
.menu_block
{
width: 100%;
height: 100%;
}
|
使用上边的方法设置二级菜单
1
2
3
4
5
6
7
8
9
| .menu_dropdown_list
{
list-style: none;
}
.nemu_dropdown_block
{
width: 100%;
height: 50px; // 因为导航栏的高度是50px，所以下拉菜单也这样设置
}
|
因为跳转功能是使用a标签实现的，所以对一二级菜单的a标签进行设置
1
2
3
4
5
6
7
8
9
10
11
| //基础设置两个地方的a标签相同，这里以一级菜单的a标签为例
.menu_text_a
{
// 因为a标签是行内元素，我们需要把他显示为块元素才能设置宽高
display: block;
color: black; // 取消a标签自带的颜色
text-decoration: none; // 取消下划线
text-align: center; // 水平居中
line-height: 50px; // 设置行间距，使其垂直居中
background-color: green;
}
|
实现下拉功能
使用缩放实现下拉和关闭，因此在下拉菜单部分写上下拉内容
1
2
3
4
5
6
7
8
9
10
| .menu_dropdown_list
{
// 核心代码 下拉实现的原理
// 我们将列表收缩为0 在我们看来也就是消失了 需要时展开为1即可
transform: scaleY(0); // 在y轴上收缩为0
// 元素默认变化位置在元素中心
// 为了表现出下拉的动画，我们将位置设置为元素上方
transform-origin: 50% 0;
transition: all 0.6s; // 所有动画触发时间为0.6s
}
|
触发的效果是：鼠标悬停在一级菜单上，其内部的下拉菜单展开
1
2
3
4
| .menu_block:hover .menu_dropdown_list
{
transform: scaleY(1); // 列表缩放变为1
}
|
完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| <style>
*
{
padding: 0;
margin: 0;
}
.the_background
{
position: fixed;
width: 100%;
height: 50px;
box-shadow: 0 0 5px 3px rgb(200, 200, 200);
z-index: 10;
}
.the_area
{
width: 100%;
height: 100%;
}
.the_list
{
display: flex;
list-style: none;
height: 100%;
}
.the_block
{
width: 100%;
height: 100%;
}
.the_text_a
{
display: block;
color: black;
text-decoration: none;
text-align: center;
background-color: green;
line-height: 50px;
}
.the_dropdown_list
{
list-style: none;
transform: scaleY(0);
transform-origin: 50% 0;
transition: all 0.6s;
}
.the_dropdown_block
{
width: 100%;
height: 50px;
}
.the_dropdown_a
{
display: block;
color: black;
text-decoration: none;
text-align: center;
background-color: blue;
line-height: 50px;
}
.the_block:hover .the_dropdown_list
{
transform: scaleY(1);
}
</style>
<div class="the_background">
<div class="the_area">
<ul class="the_list">
<li class="the_block">
<a href="" class="the_text_a">一级标签</a>
</li>
<li class="the_block">
<a href="" class="the_text_a">一级标签</a>
<ol class="the_dropdown_list">
<li class="the_dropdown_block">
<a href="" class="the_dropdown_a">二级菜单</a>
</li>
<li class="the_dropdown_block">
<a href="" class="the_dropdown_a">二级菜单</a>
</li>
<li class="the_dropdown_block">
<a href="" class="the_dropdown_a">二级菜单</a>
</li>
</ol>
</li>
<li class="the_block">
<a href="" class="the_text_a">一级标签</a>
</li>
<li class="the_block">
<a href="" class="the_text_a">一级标签</a>
</li>
<li class="the_block">
<a href="" class="the_text_a">一级标签</a>
</li>
</ul>
</div>
</div>
|
总结
总而言之并没有用什么高级的技术，适配性也不怎么样，不过用来 完成大学里面的网页大作业应该是没问题了，该帖子主要以学习为主，不建议直接复制源码在工程中使用