20231107-前端学习炫酷菜单效果和折叠侧边栏

炫酷菜单效果

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>炫酷菜单效果title>
  <script src="https://kit.fontawesome.com/d37465fc7c.js" crossorigin="anonymous">script>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      list-style: none;
      text-decoration: none;
    }

    .middle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .menu {
      width: 300px;
      border-radius: 8px;
      overflow: hidden;
    }

    .item {
      border-top: 1px solid #2980b9;
      overflow: hidden;
    }

    .btn {
      display: block;
      padding: 16px 20px;
      background: #3498db;
      position: relative;
      color: white;
    }

    .btn::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      background: #3498db;
      left: 20px;
      bottom: -7px;
      transform: rotate(45deg);
    }

    .btn i {
      margin-right: 10px;
    }

    .smenu {
      background: #333;
      overflow: hidden;
      transition: max-height 0.3s;
      max-height: 0;
    }

    .smenu a {
      display: block;
      padding: 16px 26px;
      color: white;
      font-size: 14px;
      margin: 4px 0;
      position: relative;
    }

    .smenu a::before {
      content: "";
      position: absolute;
      width: 6px;
      height: 100%;
      background: #3498db;
      left: 0;
      top: 0;
      transition: 0.3s;
      opacity: 0;
    }

    .smenu a:hover::before {
      opacity: 1;
    }

    .item:target .smenu {
      max-height: 10em;
    }
  style>
head>

<body>
  <div class="middle">
    <div class="menu">
      <li class="item" id="profile">
        <a href="#profile" class="btn">
          <i class="fa-solid fa-user">i>Profile
        a>
        <div class="smenu">
          <a href="">Postsa>
          <a href="">Picturea>
        div>
      li>

      <li class="item" id="messages">
        <a href="#messages" class="btn">
          <i class="fa-solid fa-envelope">i>Messages
        a>
        <div class="smenu">
          <a href="">newa>
          <a href="">Senta>
          <a href="">Spama>
        div>
      li>

      <li class="item" id="settings">
        <a href="#settings" class="btn">
          <i class="fa-solid fa-gear">i>Settings
        a>
        <div class="smenu">
          <a href="">Passworda>
          <a href="">Languagea>
        div>
      li>

      <li class="item">
        <a href="" class="btn">
          <i class="fa-solid fa-right-from-bracket">i>Logout
        a>
      li>
    div>
  div>
body>

html>
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

折叠侧边栏

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>折叠侧边栏title>
  <script src="https://kit.fontawesome.com/d37465fc7c.js" crossorigin="anonymous">script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    li {
      list-style: none;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f4f4f4;
    }

    .navbar {
      background-color: #3b5998;
      overflow: hidden;
      height: 63px;
    }

    .navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      font-size: 17px;
      padding: 14px 16px;
    }

    .navbar ul {
      margin: 8px 0 0 0;
    }

    .open-side i {
      padding-top: 18px;
    }

    .navbar a:hover {
      background-color: #ddd;
      color: #000;
    }

    .side-nav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      opacity: 0.8;
      overflow-x: hidden;
      padding-top: 60px;
      transition: 0.5s;
    }

    .side-nav a {
      padding: 10px 10px 10px 30px;
      font-size: 22px;
      color: #ccc;
      display: block;
      transition: .3s;
    }

    .side-nav a:hover {
      color: orange;
    }

    .side-nav .btn-close {
      position: absolute;
      top: 0;
      right: 22px;
      font-size: 36px;
    }

    #content {
      transition: margin-left .5s;
      padding: 20px;
    }

    @media(max-width:568px) {
      .navbar ul {
        display: none;
      }
    }

    /* @media(min-width:568px) {
      .open-side {
        display: none;
      }
    } */
  style>
head>

<body>
  <nav class="navbar">
    <span class="open-side">
      <a href="#" onclick="openSideMenu()">
        <i class="fa-solid fa-bars fa-2xl">i>
      a>
    span>
    <ul class="navbar-nav">
      <li><a href="#">Homea>li>
      <li><a href="#">Abouta>li>
      <li><a href="#">Servicesa>li>
      <li><a href="#">Contacta>li>
    ul>
  nav>

  <div id="side-menu" class="side-nav">
    <a href="#" class="btn-close" onclick="closeSideMenu()">×a>
    <a href="#">Homea>
    <a href="#">Abouta>
    <a href="#">Servicesa>
    <a href="#">Contacta>
  div>

  <div id="content">
    <h1>你好，世界！h1>
  div>

  <script>
    xySideMenu = document.getElementById("side-menu");
    xyContent = document.getElementById("content");

    function openSideMenu() {
      xySideMenu.style.width = "250px";
      xyContent.style.marginLeft = "250px";
    }

    function closeSideMenu() {
      xySideMenu.style.width = "0";
      xyContent.style.marginLeft = "0";
    }
  script>
body>

html>
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

相关阅读:
分类和static
Java BufferedReader类简介说明
 java中判断String类型为空和null的方法
 redis内存淘汰策略
 摸鱼也有效率——8个python自动化脚本提高打工人幸福感~
Nodejs之egg基本使用（初始化项目、内置对象、egg路由、egg控制器）
【linux】linux定时任务-crontab
数据挖掘经典十大算法_C4.5算法
 python按照【修改时间顺序】读取文件夹下的TXT文本内容
 【网页设计】基于HTML+CSS+JavaScript学生网上报到系统响应式网站
原文地址：https://blog.csdn.net/qq_44887198/article/details/134260157