CSS实现侧边栏导航

小鱼儿 2021-05-03 15:53 771阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <style type="text/css"> /*隐藏checked复选框*/ #sidemenu{ display: none; } #sidemenu:checked + aside { /*为被选中的sidemenu后的aside设置属性（紧邻）*/ left: 0; /*点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/ } #sidemenu:checked ~ #wrap { /*为被选中的sidemenu后的wrap设置属性（非紧邻）*/ padding-left: 220px; } aside { /*侧边栏,初始位置为-200px，即隐藏效果*/ position: absolute; top: 0; bottom: 0; left: -200px; width: 200px; background: black; transition: 0.2s ease-out; /*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/ } h2 { color: white; text-align: center; font-size: 2em; } /*控制侧边栏进出的按钮（外部包裹）*/ #wrap { margin-left: 20px; padding: 10px; transition: 0.2s ease-out; } /*控制侧边栏进出的按钮（内部文字样式）*/ label { /*控制侧边栏进出的按钮*/ background: white; border-radius: 70px; color: orange; cursor: pointer; display: block; font-family: Courier New; font-size: 2em; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; display: inline-block; } label:hover { background: #000; } #sideul li { list-style: none; color: white; width: 100%; height: 1.8em; font-size: 1.5em; text-align: center; } a { text-decoration: none; } #sideul li:hover { color: orange; } </style>
  8.     </head>
  10.     <body>
  11.         <input type='checkbox' id='sidemenu'>
  12.         <aside>
  13.             <h2>主菜单</h2>
  14.             <br />
  15.             <ul id="sideul">
  16.                 <a href="##">
  17.                     <li>首页</li>
  18.                 </a>
  19.                 <a href="##">
  20.                     <li style="color: orange;">导航1</li>
  21.                 </a>
  22.                 <a href="##">
  23.                     <li>导航2</li>
  24.                 </a>
  25.                 <a href="##">
  26.                     <li>导航3</li>
  27.                 </a>
  28.                 <a href="##">
  29.                     <li>导航4</li>
  30.                 </a>
  31.                 <a href="##">
  32.                     <li>导航5</li>
  33.                 </a>
  34.                 <a href="##">
  35.                     <li>导航6ʳ</li>
  36.                 </a>
  37.             </ul>
  38.         </aside>
  39.         <div id='wrap'>
  40.             <label id='sideMenuControl' for='sidemenu'>≡</label>
  41.             <!--for 属性规定 label 与哪个表单元素绑定，即将这个控制侧边栏进出的按钮与checkbox绑定-->
  42.         </div>
  44.     </body>
  46. </html>

这里写图片描述
这里写图片描述

发表评论

表情：
评论列表 （有 0 条评论，771人围观）

还没有评论，来说两句吧...

相关阅读