HTML CSS js实现可隐藏侧边导航条cid1123-扁平现代设计网页前端设计

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Slide Menu Bar</title>
  6. <link rel="stylesheet" href="style.css">
  7. <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.css">
  9. </head>
  10. <body>
  11. <input type="checkbox" id="check">
  12. <label for="check">
  13. <i class="fas fa-bars" id="btn"></i>
  14. <i class="fas fa-times" id="cancel"></i>
  15. </label>
  16. <div class="sidebar">
  17. <header>My App</header>
  18. <ul>
  19. <li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
  20. <li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
  21. <li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
  22. <li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
  23. <li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
  24. <li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
  25. <li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>
  26. </ul>
  27. </div>
  28. <section></section>
  29. </body>
  30. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slide Menu Bar</title>
    <link rel="stylesheet" href="style.css">
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.css">
</head>
<body>
    <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
        <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
        <header>My App</header>
        <ul>
            <li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
            <li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
            <li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
            <li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
            <li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
            <li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
            <li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>
        </ul>
    </div>
    <section></section>
</body>
</html>

css

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. list-style: none;
  5. text-decoration: none;
  6. font-family: "Roboto", sans-serif;
  7. }
  8. .sidebar{
  9. position: fixed;
  10. left: -250px;
  11. width: 250px;
  12. height: 100%;
  13. background: #042331;
  14. transition: all .5s ease;
  15. }
  16. .sidebar header{
  17. font-size: 22px;
  18. color: white;
  19. text-align: center;
  20. line-height: 70px;
  21. background: #063146;
  22. user-select: none;
  23. }
  24. .sidebar ul a{
  25. display: block;
  26. height: 100%;
  27. width: 100%;
  28. line-height: 65px;
  29. font-size: 20px;
  30. color: white;
  31. padding-left: 40px;
  32. box-sizing: border-box;
  33. border-top: 1px solid rgba(255,255,255,.1);
  34. border-bottom: 1px solid black;
  35. translation: .4s;
  36. }
  37. ul li:hover a{
  38. padding-left: 50px;
  39. }
  40. .sidebar ul a i{
  41. margin-right: 16px;
  42. }
  43. #check{
  44. display: none;
  45. }
  46. label #btn,label #cancel{
  47. position: absolute;
  48. cursor: pointer;
  49. background: #042331;
  50. border-radius: 3px;
  51. }
  52. label #btn{
  53. left: 40px;
  54. top: 25px;
  55. font-size: 35px;
  56. color: white;
  57. padding: 6px 12px;
  58. transition: all .5s;
  59. }
  60. label #cancel{
  61. z-index: 1111;
  62. left: -195px;
  63. top: 17px;
  64. font-size:30px;
  65. color: #0a5275;
  66. padding: 4px 9px;
  67. transition: all .5s ease;
  68. }
  69. #check:checked ~ .sidebar{
  70. left: 0;
  71. }
  72. #check:checked ~ label #btn{
  73. left: 250px;
  74. opacity: 0;
  75. pointer-events: none;
  76. }
  77. #check:checked ~ label #cancel{
  78. left: 195px;
  79. }
  80. #check:checked ~ section{
  81. margin-left: 250px;
  82. }
  83. section{
  84. background: url(bg.png) no-repeat;
  85. background-position: center;
  86. background-size: cover;
  87. height: 100vh;
  88. transition: all .5s;
  89. }
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
}


.sidebar{
    position: fixed;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #042331;
    transition: all .5s ease;
}

.sidebar header{
    font-size: 22px;
    color: white;
    text-align: center;
    line-height: 70px;
    background: #063146;
    user-select: none;
}

.sidebar ul a{
    display: block;
    height: 100%;
    width: 100%;
    line-height: 65px;
    font-size: 20px;
    color: white;
    padding-left: 40px;
    box-sizing: border-box;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid black;
    translation: .4s;
}

ul li:hover a{
    padding-left: 50px;
}

.sidebar ul a i{
    margin-right: 16px;
}


#check{
    display: none;
}

label #btn,label #cancel{
    position: absolute;
    cursor: pointer;
    background: #042331;
    border-radius: 3px;
}

label #btn{
    left: 40px;
    top: 25px;
    font-size: 35px;
    color: white;
    padding: 6px 12px;
    transition: all .5s;
}

label #cancel{
    z-index: 1111;
    left: -195px;
    top: 17px;
    font-size:30px;
    color: #0a5275;
    padding: 4px 9px;
    transition: all .5s ease;
}

#check:checked ~ .sidebar{
    left: 0;
}

#check:checked ~ label #btn{
    left: 250px;
    opacity: 0;
    pointer-events: none;
}

#check:checked ~ label #cancel{
    left: 195px;
}

#check:checked ~ section{
    margin-left: 250px;
}

section{
    background: url(bg.png) no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    transition: all .5s;
}

在线演示


让链接同时具备两种打开方式
获取源码: slide_menu-master
下载数:414人次, 文件大小: 223.1 KB, 上传日期: 2021年-3 月-23日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

5,506 人查阅

类似文章