HTML+CSS实现侧边栏收放

最新推荐文章于 2025-04-08 19:47:09 发布

iteye_11613

最新推荐文章于 2025-04-08 19:47:09 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS HTML 文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/iteye_11613/article/details/82537641

HTML 同时被 2 个专栏收录

25 篇文章

订阅专栏

CSS

20 篇文章

订阅专栏

本文介绍了一个使用HTML5和CSS3实现的简洁且实用的侧边栏菜单效果。通过简单的CSS选择器和属性变化，可以轻松创建一个响应式的侧边栏导航栏，当点击按钮时，侧边栏会从屏幕左侧滑出。该示例适用于初学者学习CSS3过渡动画及布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3点击显示</title>
<style>
*{ margin:0; padding:0; }
html{ height:100%; }
p{ padding:10px 0; }
body{ min-height:100%; font-family:arial; position:relative; }
body.sideMenu{ margin:0; -webkit-transform:none; transform:none; }
	#footer {
		position:relative;
		bottom:0; left:0;
		width:100%;
		height:48px;
		background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
		background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
		background-image:-o-linear-gradient(top, #999, #666 2%, #222);
		padding:0;
		border-top:1px solid #444; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; 
	}
#sideToggle{ display:none; }
#sideToggle:checked + aside{ left:0; }
#sideToggle:checked ~ #wrap{ padding-left:220px; }
#sideToggle:checked ~ #footer{margin-left:200px; }
body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }
body > aside > h2{ color:#FFF; text-align:center; font-weight:normal; padding:10px; }
#wrap{ margin-left:20px; padding:10px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; }
  #wrap > label{ display:inline-block; }
    #wrap > label{ 
      background:#f1103a;
      border-radius:50px;
      color: #FFF;
      cursor: pointer;
      display: block;
      font-family: Courier New;
      font-size: 25px;
      font-weight: bold;
      width: 30px;
      height: 30px;
      line-height: 35px;
      text-align: center;
      text-shadow: 0 -4px;
    }
    #wrap > label:hover{ background:#000; }
	
</style>
</head>
<body>	
<input type='checkbox' id='sideToggle'>
<aside><h2>Side Menu</h2></aside>
	<div id='wrap'>
		<label id='sideMenuControl' for='sideToggle'>=</label>
		<p>HTML5/CSS3点击显示侧边框   </p>
	</div>
	<div id="footer"></div>
</body>
</html>