div+css实现左侧垂直导航图标菜单效果代码-html代码-BFW代码库

div+css实现左侧垂直导航图标菜单效果代码

代码语言：html

代码描述：div+css实现左侧垂直导航图标菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
    
    :root {
      /* --primary-clr: #524c44; */
      /* --primary-clr: #3c5f3d; */
      --primary-clr: #006132e6;
      /* --bg-clr: #f2f4f5; */
      --bg-clr: #fff6f6;
      --white-bg: #fff;
      --dark-text-clr: #363b46;
      --light-text-clr: #fff;
      --hover-clr: #f1e8fd;
    }
    body.dark-mode {
      --primary-clr: rgb(48, 97, 211);
      /* --bg-clr: #1e1e1e; */
      --bg-clr: #151515;
      /* --white-bg: #23262b; */
      --white-bg: #141418;
      --dark-text-clr: #fff;
      --light-text-clr: #fff;
      --hover-clr: #31313f;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Rubik", sans-serif;
    }
    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-clr);
    }
    .container {
      width: 85px;
      min-heigh.........完整代码请登录后点击上方下载按钮下载查看