JQuery实现右上角图标点击后滑下竖向菜单(可关闭)

2013-08-18 06:22:52 -0400

此代码仅供参考

代码说明

JQuery实现右上角点击后滑下来的竖向菜单，感谢end提供CSS方面的帮助。可以做成在线客服之类的，点击下滑后，带关闭按钮，因此在不想显示的时候可以关掉它。

html代码

<style>
#opciones {
z-index: 7000; position: fixed; padding-bottom: 10px; padding-left: 10px; width: 120px; 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: 12px;
}
#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="#">PHP源码</a></p>
  <p><a href="#">JSP源码</a></p>
  <p><a href="#">菜单源码</a></p>
  <p><a href="#">FLASH源码</a></p>
  <p><a href="#">VC源码</a></p>
  <p><a href="#">VB源码</a></p>
  <p><a href="#">DELPHI源码</a></p>
  <p><a href="#">C#源码</a></p>
  <p><a href="#">JS源码</a></p>
  <p><a href="#">AJAX源码</a></p>
  <p><a href="#">JQUERY源码</a></p>
  <p><a href="#">JS源码</a></p>
  <p><a href="#">.NET源码</a></p> 
</div>

代码演示

设置

请看页面右上角图标并点击

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N