设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › HTML+CSS侧边栏导航! 附源码
返回列表 发新帖
查看: 73|回复: 0

HTML+CSS侧边栏导航! 附源码

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 16:16:53 | 显示全部楼层 |阅读模式
效果展示
111.gif

源码

  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7.     <title>赏心悦目的侧边导航栏</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }

  14.         body {
  15.             height: 100vh;
  16.             display: flex;
  17.             justify-content: center;
  18.             align-items: center;
  19.             background-color: #f0f8ff;
  20.             /* 淡蓝色背景 */
  21.         }

  23.         ul {
  24.             list-style: none;
  25.         }

  27.         nav {
  28.             position: fixed;
  29.             width: 300px;
  30.             height: 98%;
  31.             left: 6px;
  32.             background-color: #e0ffff;
  33.             /* 淡蓝色侧边栏 */
  34.             border-radius: 20px 20px 20px 0px;
  35.         }

  37.         .menus {
  38.             margin: 50px 0;
  39.             color: #333;
  40.         }

  42.         .li {
  43.             letter-spacing: 2px;
  44.             font-size: 17px;
  45.             font-weight: 600;
  46.             padding: 16px 12px;
  47.             box-sizing: border-box;
  48.             transition: 0.3s;
  49.         }

  51.         .menus li:hover {
  52.             background-color: #add8e6;
  53.             /* 浅蓝色悬停效果 */
  54.         }

  56.         .li .fa {
  57.             font-size: 20px;
  58.             width: 50px;
  59.             height: 20px;
  60.             text-align: center;
  61.             margin-left: 5px;
  62.         }

  64.         .li ul {
  65.             border-radius: 20px;
  66.             width: 0;
  67.             height: 550px;
  68.             padding: 50px 0;
  69.             background-color: #b0e0e6;
  70.             /* 浅青色子菜单背景 */
  71.             position: absolute;
  72.             top: 0;
  73.             right: 0;
  74.             overflow: hidden;
  75.             transition: 0.3s;
  76.             height: 100%;
  77.         }

  79.         .li ul li {
  80.             padding: 16px 24px;
  81.             white-space: nowrap;
  82.             transition: 0.3s;
  83.         }

  85.         .li:hover ul {
  86.             border-radius: 20px;
  87.             width: 250px;
  88.         }

  90.         .li ul li:hover {
  91.             background-color: #87cefa;
  92.             /* 更深一点的蓝色 */
  93.         }
  94.     </style>
  95. </head>

  97. <body>
  98.     <nav>
  99.         <ul class="menus">
  100.             <li class="li"> QQ <ul>
  101.                     <li>QQ1号</li>
  102.                     <li>QQ2号</li>
  103.                     <li>QQ3号</li>
  104.                     <li>QQ4号</li>
  105.                     <li>QQ5号</li>
  106.                     <li>QQ6号</li>
  107.                     <li>QQ7号</li>
  108.                 </ul>
  109.             </li>
  110.             <li class="li"> 探探
  111.                 <ul>
  112.                     <li>探探1号</li>
  113.                     <li>探探2号</li>
  114.                     <li>探探3号</li>
  115.                     <li>探探4号</li>
  116.                     <li>探探5号</li>
  117.                     <li>探探6号</li>
  118.                     <li>探探7号</li>
  119.                     <li>探探8号</li>
  120.                     <li>探探9号</li>
  121.                     <li>探探10号</li>
  122.                 </ul>
  123.             </li>
  124.             <li class="li">推特<ul>
  125.                     <li>推特1号</li>
  126.                     <li>推特2号</li>
  127.                     <li>推特3号</li>
  128.                 </ul>
  129.             </li>
  130.             <li class="li"> ins <ul>
  131.                     <li>ins1号</li>
  132.                     <li>ins2号</li>
  133.                     <li>ins3号</li>
  134.                     <li>ins4号</li>
  135.                     <li>ins5号</li>
  136.                 </ul>
  137.             </li>
  138.             <li class="li"> 电报 <ul>
  139.                     <li>电报1号</li>
  140.                     <li>电报2号</li>
  141.                     <li>电报3号</li>
  142.                     <li>电报4号</li>
  143.                     <li>电报5号</li>
  144.                 </ul>
  145.             </li>
  146.         </ul>
  147.     </nav>
  148. </body>

  150. </html>
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表