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

作者code
  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. }
  10. .sidebar{
  11. position: fixed;
  12. left: -250px;
  13. width: 250px;
  14. height: 100%;
  15. background: #042331;
  16. transition: all .5s ease;
  17. }
  19. .sidebar header{
  20. font-size: 22px;
  21. color: white;
  22. text-align: center;
  23. line-height: 70px;
  24. background: #063146;
  25. user-select: none;
  26. }
  28. .sidebar ul a{
  29. display: block;
  30. height: 100%;
  31. width: 100%;
  32. line-height: 65px;
  33. font-size: 20px;
  34. color: white;
  35. padding-left: 40px;
  36. box-sizing: border-box;
  37. border-top: 1px solid rgba(255,255,255,.1);
  38. border-bottom: 1px solid black;
  39. translation: .4s;
  40. }
  42. ul li:hover a{
  43. padding-left: 50px;
  44. }
  46. .sidebar ul a i{
  47. margin-right: 16px;
  48. }
  51. #check{
  52. display: none;
  53. }
  55. label #btn,label #cancel{
  56. position: absolute;
  57. cursor: pointer;
  58. background: #042331;
  59. border-radius: 3px;
  60. }
  62. label #btn{
  63. left: 40px;
  64. top: 25px;
  65. font-size: 35px;
  66. color: white;
  67. padding: 6px 12px;
  68. transition: all .5s;
  69. }
  71. label #cancel{
  72. z-index: 1111;
  73. left: -195px;
  74. top: 17px;
  75. font-size:30px;
  76. color: #0a5275;
  77. padding: 4px 9px;
  78. transition: all .5s ease;
  79. }
  81. #check:checked ~ .sidebar{
  82. left: 0;
  83. }
  85. #check:checked ~ label #btn{
  86. left: 250px;
  87. opacity: 0;
  88. pointer-events: none;
  89. }
  91. #check:checked ~ label #cancel{
  92. left: 195px;
  93. }
  95. #check:checked ~ section{
  96. margin-left: 250px;
  97. }
  99. section{
  100. background: url(bg.png) no-repeat;
  101. background-position: center;
  102. background-size: cover;
  103. height: 100vh;
  104. transition: all .5s;
  105. }
*{
    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 人查阅

类似文章