[代码收集]始终顶部右上角收缩栏

2014-08-18 11:39:13 -0400

始终顶部右上角收缩栏

<style>
#opciones {
z-index: 7000; position: fixed; padding-bottom: 10px; padding-left: 10px; width: 100px; padding-right: 10px; font: 12px/140% arial, helvetica, sans-serif; background: #e7e7e7; color: #999; top: 0px; right: 0px; padding-top: 10px;
}
#opciones h2 {
border-bottom: #fff 1px solid; padding-bottom: 3px; margin: 0px 0px 3px; padding-left: 0px; padding-right: 0px; color: #666; font-size: 16px; padding-top: 0px
}
#opciones h3 {
padding-bottom: 0px; text-indent: 0px; margin: 3px 0px; padding-left: 0px; padding-right: 0px; height: 15px; color: #666666; padding-top: 0px
}
#opciones p {
font-size: 15px;
}
#opciones a {
color: green; text-decoration: none
}
#opciones a:hover {
background: #666666; color: #fff
}
#settings {
z-index: 8000; position: fixed; text-indent: -99999px; width: 43px; display: block; background: url(http://www.codefans.net/jscss/demoimg/201402/opciones.gif) no-repeat 0px 0px; height: 43px; top: 0px; cursor: pointer; right: 0px
}
#settings:hover {
background: url(http://www.codefans.net/jscss/demoimg/201402/opciones.gif) no-repeat 0px -86px
}
.cerrar {
background: url(http://www.codefans.net/jscss/demoimg/201402/opciones.gif) no-repeat 0px -43px!important;
}
</style>
<script type=text/javascript src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $('#opciones').hide();
 $('#settings').click(function(){
  $('#opciones').slideToggle();
  $(this).toggleClass("cerrar");
  
    });
  });
</SCRIPT>
<div id="settings">设置</div>
<div id="opciones">
  <p><a href="/">首页</a></p>
  <p><a href="/entry/298554">留言</a></p>
<p><a href="/entry/298560">友链</a></p>
<p><a href="/entry/172658">装扮</a></p>
<p><a href="http://lcr.howbbs.com/">论坛</a></p>
</div>

代码演示

看顶部

设置

«Newer Older»

----Comments(1)----
csngmap (@csngmap) | @ at 2014-08-20 05:53:
这个不错，挺实用

Back to home

Subscribe | Register | Login | N