CSS下拉菜单及侧滑菜单

发表于 | 更新于 | 分类于

利用css实现简单的下拉菜单及侧滑菜单效果

下拉菜单

checkbox有两种状态checked与unchecked，将其设置为隐藏，用label标签的for来绑定checkbox，通过label标签来触发checkbox的unchecked 和checked两种状态，并将下拉选项设置为隐藏，通过:checked伪类选择器和同胞选择器 ~来控制下拉选项的显示状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <nav>
        <input type="checkbox" id="menu">
        <label for="menu" class="ham_menus">
            <span></span>
            <span></span>
            <span></span>
        </label>
        <div class="selection">
            <li>首页</li>
            <li>新闻</li>
            <li>文章</li>
            <li>视频</li>
        </div>
    </nav>
    <main>
        <div class="banner">banner</div>
    </main>
</body>

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
/*css*/
html {
    font-size: 625%;
    list-style: none;}
nav {
    position: relative;
    width: 100vw;
    height: .6rem;
    background: white;}
input {
    display: none;}
.ham_menus {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: .125rem;
    width: .3rem;
    height: .25rem;
    background: #ddd;
    border-radius: .03rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
#menu:checked ~ .selection {
    display: block;}
span {
    display: block;
    margin: .015rem 0;
    width: .2rem;
    height: .02rem;
    background: #888;}
.selection {
    position: relative;
    top: .6rem;
    display: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    font-size: .2rem;
    color: #888;}
li {
    margin: 0 0 .1rem;
    display: flex;
    justify-content: center;}
.banner {
    width: 100vw;
    height: 1.5rem;
    font-size: .7rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #97a3fa;}

侧滑菜单

利用绝对定位固定汉堡并将侧滑选定位于视区外，通过:checked伪类选择器和同胞选择器 ~来控制侧滑选项与页面内容整体平移，从而显示侧滑选项（同胞选择器只能适用于有共同父元素并且同级的两个元素，所以需要将侧滑选项与页面内容一起放在同一个标签内，并使这个标签与label处于同一级）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <input type="checkbox" id="menu">
    <label for="menu" class="ham_menus">
        <span></span>
        <span></span>
        <span></span>
    </label>
    <main>
        <nav></nav>
        <div class="selection">
            <li>首页</li>
            <li>新闻</li>
            <li>文章</li>
            <li>视频</li>
        </div>
        <div class="banner">banner</div>
    </main>
</body>

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
/*css*/
html {
    font-size: 625%;
    list-style: none;}
body {
    overflow-x:hidden;}
input {
    display: none;}
.ham_menus {
    position: absolute;
    top: .15rem;
    left: .125rem;
    width: .3rem;
    height: .25rem;
    background: #ddd;
    border-radius: .03rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
#menu:checked ~ main {
    transform: translateX(60vw);
    transition: transform 500ms ease;}
span {
    display: block;
    margin: .015rem 0;
    width: .2rem;
    height: .02rem;
    background: #888;}
nav {
    position: fixed;
    width: 100vw;
    height: .6rem;
    background: white;
    z-index: 99;}
.selection {
    position: absolute;
    left: -60vw;
    top: .6rem;
    display: block;
    width: 60vw;
    height: 100vh;
    background: rgba(221, 221, 221, 0.5);
    font-size: .2rem;
    color: #888;}
li {
    margin: 0 0 .1rem;
    display: flex;
    justify-content: center;}
.banner {
    position: absolute;
    top: .6rem;
    width: 100vw;
    height: 1.5rem;
    font-size: .7rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #97a3fa;}