网页中侧边栏是很常用的功能, 尤其是移动端的使用, 更是很频繁, 今天就来介绍一下如何使用纯 div+CSS 实现侧边栏效果.
实现思路如下:
1, 使用 input 和 label 标签, 将 input 隐藏, 用 CSS 美化 label 标签实现打开关闭侧边栏按钮.
2, 当 input 选中时使用伪类选择器: checked 选择它的兄弟元素 aside 将它显示出来即可.
(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <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>
- </head>
- <body>
- <input type='checkbox' id='sidemenu'>
- <aside>
- <h2>
- 主菜单
- </h2>
- <br />
- <ul id="sideul">
- <a href="##">
- <li>
- 首页
- </li>
- </a>
- <a href="##">
- <li style="color: orange;">
- 导航 1
- </li>
- </a>
- <a href="##">
- <li>
- 导航 2
- </li>
- </a>
- <a href="##">
- <li>
- 导航 3
- </li>
- </a>
- <a href="##">
- <li>
- 导航 4
- </li>
- </a>
- <a href="##">
- <li>
- 导航 5
- </li>
- </a>
- <a href="##">
- <li>
- 导航 6ʳ
- </li>
- </a>
- </ul>
- </aside>
- <div id='wrap'>
- <label id='sideMenuControl' for='sidemenu'>
- ≡
- </label>
- <!--for 属性规定 label 与哪个表单元素绑定, 即将这个控制 侧边栏进出的按钮与 checkbox 绑定 -->
- </div>
- </body>
- </HTML>
效果:
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14643.html