CSS100Day(7)-菜单列表和公告在一起

设计简介#

没有什么可以介绍的，直接看代码，都是简单元素堆叠

效果展示#

上午 9:24

陈小秋 在墙上贴了个照片

上午 8:19

陈打球 评论了你的上一个帖子

昨天

陈月玲 添加了你的好友

实现代码和步骤#

HTML部分#

1
<body>
2
    <div class="frame">
3
        <div class="panel">
4
            <div class="header">
5
                <div class="menu-icon">
6
                    <div class="dash-top"></div>
7
                    <div class="dash-bottom"></div>
8
                    <div class="circle"></div>
9
                </div>
10
                <div class="title">通知公告</div>
11
            </div>
12
            <div class="notifications">
13
                <div class="line"></div>
14
                <div class="notification">
15
                    <div class="circle"></div>
16
                    <div class="time">上午 9:24</div>
17
                    <p><b>陈小秋</b> 在墙上贴了个照片</p>
18
                </div>
19
                <div class="notification">
20
                    <div class="circle"></div>
21
                    <div class="time">上午 8:19</div>
22
                    <p><b>陈打球</b> 评论了你的上一个帖子</p>
23
                </div>
24
                <div class="notification">
25
                    <div class="circle"></div>
26
                    <div class="time">昨天</div>
27
                    <p><b>陈月玲</b> 添加了你的好友</p>
28
                </div>
29
            </div>
30
        </div>
31
        <div class="menu">
32
            <ul>
33
                <li><span>仪表盘</span></li>
34
                <li><span>概述</span></li>
35
                <li><span>通知公告</span></li>
36
                <li><span>消息</span></li>
37
                <li><span>设置</span></li>
38
            </ul>
39
        </div>
40
    </div>
41
    <script>
42
        const menuIcon = document.querySelector(".menu-icon")
43
        const panel = document.querySelector(".panel")
44
        const menu = document.querySelector(".menu")
45
        menuIcon.addEventListener("click", () => {
46
            panel.classList.toggle("show-menu")
47
            menu.classList.toggle("show-menu")
48
        })
49
    </script>
50
</body>

CSS部分#

1
:root {
2
    --blue: #5f98cd;
3
    --blue-dark: #264057;
4
    --blue-light: #b2daff;
5
    font-family: "微软雅黑";
6
}
7

8
.frame {
9
    position: relative;
10
    width: 400px;
11
    height: 400px;
12
    border-radius: 2px;
13
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
14
    background: var(--blue-dark);
15
    overflow: hidden;
16
}
17

18
.panel {
19
    position: absolute;
20
    z-index: 2;
21
    width: 300px;
22
    height: 300px;
23
    top: 50px;
24
    left: 50px;
25
    background: #fff;
26
    border-radius: 3px;
27
    overflow: hidden;
28
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
29
    transition: all 0.5s ease-in-out;
30

31
    /* 添加.show-menu类样式右移动 */
32
    &.show-menu {
33
        transform: translate3d(150px, 0, 0);
34
    }
35

36
    .header {
37
        height: 60px;
38
        width: 100%;
39
        background: var(--blue);
40

41
        .menu-icon {
42
            position: absolute;
43
            width: 29px;
44
            height: 15px;
45
            top: 23px;
46
            left: 20px;
47
            cursor: pointer;
48

49
            &:hover {
50
                .dash-top,
51
                .dash-bottom,
52
                .circle {
53
                    background-color: #fff;
54
                }
55
            }
56

57
            .dash-top {
58
                position: absolute;
59
                width: 20px;
60
                height: 3px;
61
                top: 0;
62
                left: 0;
63
                background: var(--blue-light);
64
                transition: all 0.2s;
65
                border-radius: 3px;
66
            }
67

68
            .dash-bottom {
69
                position: absolute;
70
                width: 29px;
71
                height: 3px;
72
                bottom: 0;
73
                background: var(--blue-light);
74
                transition: all 0.2s;
75
                border-radius: 3px;
76
            }
77

78
            .circle {
79
                position: absolute;
80
                width: 7px;
81
                height: 7px;
82
                background: var(--blue-light);
83
                top: -2px;
84
                right: 0;
85
                border-radius: 50%;
86
                transition: all 0.2s;
87
            }
88
        }
89

90
        .title {
91
            color: #fff;
92
            line-height: 60px;
93
            text-align: center;
94
        }
95
    }
96

97
    .notifications {
98
        position: relative;
99
        height: 100%;
100
        overflow: hidden;
101

102
        .line {
103
            position: absolute;
104
            top: 0;
105
            left: 27px;
106
            bottom: 0;
107
            width: 3px;
108
            background: #ebebeb;
109
        }
110

111
        .notification {
112
            position: relative;
113
            z-index: 2;
114
            margin: 32px 20px 25px 43px;
115

116
            &:hover {
117
                color: var(--blue);
118
                cursor: pointer;
119
            }
120

121
            .circle {
122
                box-sizing: border-box;
123
                position: absolute;
124
                height: 11px;
125
                width: 11px;
126
                background: #fff;
127
                border: 2px solid var(--blue);
128
                box-shadow: 0 0 0 3px #fff;
129
                border-radius: 6px;
130
                top: 0;
131
                left: -20px;
132
            }
133

134
            .time {
135
                display: block;
136
                font-size: 11px;
137
                line-height: 11px;
138
                margin-bottom: 8px;
139
            }
140

141
            p {
142
                font-size: 15px;
143
                line-height: 20px;
144
                margin: 0;
145

146
                b {
147
                    font-weight: 600;
148
                }
149
            }
150
        }
151
    }
152
}
153

154
.menu {
155
    width: 170px;
156
    height: 270px;
157
    color: var(--blue-light);
158
    position: absolute;
159
    top: 65px;
160
    left: 50px;
161
    background: #43627d;
162
    transition: all 0.5s ease-in-out;
163
    transform: translate3d(20px, 0, 0);
164

165
    &.show-menu {
166
        transform: translate3d(0, 0, 0);
167
    }
168

169
    ul {
170
        list-style: none;
171
        margin: 0;
172
        padding: 10px 0;
173

174
        li {
175
            color: #93b2cd;
176
            margin: 0;
177
            padding: 18px 17px;
178
            list-style: none;
179
            font-size: 14px;
180
            line-height: 14px;
181
            transition: all 0.3s;
182
            cursor: pointer;
183

184
            &:hover {
185
                color: #fff;
186
                background: #385269;
187
            }
188
        }
189
    }
190
}

设计简介#

效果展示#

实现代码和步骤#

HTML部分#

CSS部分#

评论区

目录