CSS制作侧边悬浮窗口-Sham@双目瞿

这个是很多年前自己做的一个CSS版漂浮侧边栏，通过简单的CSS就能实现。
其实很简单，就是通过设置图层的固定位置，来实现悬浮，主要的CSS是这几个：

/*让图层位置固定*/
position:fixed;
/*让图层悬浮起来，显示在最上面一层*/
z-index:999;
/*让图层在差不左面的中间位置，如果需要在右面，就把left换成right*/
top:45%;left:0;

/*让图层位置固定*/

position:fixed;

/*让图层悬浮起来，显示在最上面一层*/

z-index:999;

/*让图层在差不左面的中间位置，如果需要在右面，就把left换成right*/

top:45%;left:0;

这个可以自己设置值来调节，比如宽高，上中下等等。

为了让效果更好，能自动隐藏，就还需要继续丰富代码，下面是完整代码：

<style type="text/css">
/*悬浮窗口总体DIV squ-side*/
#squ-side{
width:250px;
height:auto;
margin:0px;
position:fixed;
background:none;
z-index:999999;
overflow:hidden;
top:40%;
left:-220px;/*具体负的值根据为*/
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
}</code>

/*悬浮窗口内容DIV squ-sidec*/
.squ-sidec{
float:left;
width:210px;
border:2px solid #ccc;
box-shadow:0px 5px 5px #565656;
-webkit-box-shadow:0px 5px 5px #565656;
-moz-box-shadow:0px 5px 5px #565656;
-o-box-shadow:0px 5px 5px #565656;
}

/*悬浮窗口出发移动渐显的按钮DIV squ-sideb*/
.squ-sideb{
float:right;
width:25px;
}
.squ-sideb .b{
height:auto;
border:2px solid #ccc;
box-shadow:0px 5px 5px #565656;
-webkit-box-shadow:0px 5px 5px #565656;
-moz-box-shadow:0px 5px 5px #565656;
-o-box-shadow:0px 5px 5px #565656;
}

/*鼠标触发渐显效果*/
#squ-side:hover{
left:0px;
}
#squ-side:hover .squ-sideb .b{
opacity:0;
filter:alpha(opacity=0);
}

</style>
<!--侧栏漂浮开始-->
<div id="squ-side">
<div class="squ-sidec">
<div>About Me</div>
<div style="text-align:left;">
性别：男</br>
出生年月：</br>
星座：天蝎</br>
血型：貌似是O型</br>
爱好：上网瞎折腾，发呆，睡觉</br>
优点：没发现</br>
缺点：太多，省略5000字</br>
邮箱地址：sham@shamqu.cn
</div>
</div>
<div class="squ-sideb>
<div class="b">
关
于
我
</div>
</div>
</div>
<!--侧栏漂浮结束-->

/*悬浮窗口总体DIV squ-side*/

#squ-side{

width:250px;

height:auto;

margin:0px;

position:fixed;

background:none;

z-index:999999;

overflow:hidden;

top:40%;

left:-220px;/*具体负的值根据为*/

-webkit-transition: .5s ease-in-out;

-moz-transition: .5s ease-in-out;

-o-transition: .5s ease-in-out;

}</code>

/*悬浮窗口内容DIV squ-sidec*/

.squ-sidec{

float:left;

width:210px;

border:2px solid #ccc;

box-shadow:0px 5px 5px #565656;

-webkit-box-shadow:0px 5px 5px #565656;

-moz-box-shadow:0px 5px 5px #565656;

-o-box-shadow:0px 5px 5px #565656;

}

/*悬浮窗口出发移动渐显的按钮DIV squ-sideb*/

.squ-sideb{

float:right;

width:25px;

}

.squ-sideb .b{

height:auto;

border:2px solid #ccc;

box-shadow:0px 5px 5px #565656;

-webkit-box-shadow:0px 5px 5px #565656;

-moz-box-shadow:0px 5px 5px #565656;

-o-box-shadow:0px 5px 5px #565656;

}

/*鼠标触发渐显效果*/

#squ-side:hover{

left:0px;

}

#squ-side:hover .squ-sideb .b{

opacity:0;

filter:alpha(opacity=0);

}

</style>

<div>About Me</div>

性别：男</br>

出生年月：</br>

星座：天蝎</br>

血型：貌似是O型</br>

爱好：上网瞎折腾，发呆，睡觉</br>

优点：没发现</br>

缺点：太多，省略5000字</br>

邮箱地址：sham@shamqu.cn

</div>

关

于

我

</div>

具体效果可以看图片，或者去我的回忆演示站看下。

其实很多网站浮动在右下角的返回到顶部的功能，应该通过这个也可以实现，只是把链接定位到某个位置或者换成#就可以了，不过Sham没有去使用，因为主题已经带了，如果大家感兴趣，可以去自行开发下。

CSS制作侧边悬浮窗口

相关推荐

评论抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏