自己使用纯 CSS 来制作的侧栏固定菜单(最简易版本)DEMO

自己随便做的一个侧栏固定弹出效果菜单,使用纯 CSS 来做的。

因为是垂直菜单,所以没有使用垫子,而是使用了 border 属性来实现菜单的弹出,这个方法有点儿飘逸。

里面的代码加上了注释。 具体细节可以自己可以 COPY 直接运行体会一下,

因为是纯 HTML + CSS 应该一般都不会有问题。 假如想做成更炫的样式只需要做少许改动就可以了。

DEMO 代码比较简单。

大家谅解哈 ... 有问题请留言 ...

 

<!DOCTYPE html>
<html>
  <head>
  	<title>tab.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<style type="text/css">
			
			/* 不同浏览器 body margin 是不一样的 , chrome 是 8px , 所以假如要保证绝对一致的样式的话。则需要设置 margin 为 0 ,另外 html 也有边框 谢特,太恶搞了*/
			/* 最外层是 html 最起码在 chrome 下是这样的 ,所以在使用 border 的话 , html 也会有效果 */
			body{
				margin: 0;
				padding: 0;
			}
			
			/* ul container width 宽度就决定了content-margin */
			.ul-container{
				float: left;	
				position: fixed;
				top: 200px;
				width: 80px;
				left: 20px;
				padding: 0;
				margin: 0;				
			}
			
			/* 默认 ul 会有前后 1em 的间距 ,假如是 float 进行排列的话会有默认的  padding,设置 list-style: none 来消除子元素 li 的影响   */
			ul{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			/* li 默认样式*/
			ul li{
				overflow: hidden;
			}
			
			/* li div.select 选择按钮样式,设置成右浮动 ,这里因为字体居中所以就不要设置左右 padding 因为 要和边相贴近所以左右 margin 也无需设置了 */			
			ul li div.select{
			 	float: right;
				width: 70px;
				cursor: pointer;
				color: white;
				background-color: blue;
				margin: 1px 0;
				padding: 1px 0;
				text-align: center;
			}
			
			/* li hover 通过增加  border  来赋予弹出效果 ,通过  border 附加弹出效果比较简单实用 。*/
			ul li div.select:HOVER{
				border-right: 10px solid yellow;
				background-color: yellow;
				color: blue;
			}
			
			/* 主体内容,通过设置 margin-left 来进行锁定 */
			.content{
				width: 1000px;
				height: 1000px;
				margin: 0 auto 0 100px;
				padding: 10px;
				background-color: yellow;
			}
			
		</style>
  </head>
  
  <body>
  	<!-- 计算 ul container 的位置了,因为有 border 的影响,采用 fixed 的话就会有 100px 像素的偏移量的-->
  	<div class="ul-container" >
	  	<ul>
				<li>
					<div class="select">1</div>
				</li>
				<li>
					<div class="select">2</div>
				</li>
				<li>
					<div class="select">3</div>
				</li>
				<li>
					<div class="select">4</div>
				</li>
		  </ul>
	  </div>
	  
  	<!-- 需要设定  margin-left 来进行固定 -->
  	<div class="content">
  		this is content	
  	</div>
  	
  	<!-- 用于清除浮动影响从而使父层包含子层 -->
		<div style="clear: both;"></div>
		
  </body>
</html>

你可能感兴趣的:(侧栏固定菜单,CSS实现侧栏弹出菜单,侧栏弹出菜单,简易侧栏菜单)