js 点击侧边栏展示内容_javascript 实现动态侧边栏实例详解

javascript 实现动态侧边栏

总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的。

首先是HTML 结构

侧边栏

然后是css的样式：

#div1{

width:150px;

height:200px;

background:#999999;

position:absolute;

left:-150px;}

span{

width:20px;

height:70px;

line-height:23px;

background:#09C;

position:absolute;

right:-20px;

top:70px;}

默认的样式 侧边栏是隐藏起来的如图：

当鼠标移入以后如图：

下面是完整代码：

无标题文档

#div1{

width:150px;

height:200px;

background:#999999;

position:absolute;

left:-150px;}

span{

width:20px;

height:70px;

line-height:23px;

background:#09C;