jquery实现像栅栏一样左右滑出式二级菜单效果代码


Posted in Javascript onAugust 24, 2015

本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码。分享给大家供大家参考。具体如下:

这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件。

运行效果截图如下:

jquery实现像栅栏一样左右滑出式二级菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery栅栏菜单左右划出菜单</title>
<title>Grooveshark风格的菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
//jquery.grooveshark.js
jQuery.fn.grooveshark = function() { 
 return this.each(function() {
  var raw = this;
  var elm = jQuery(this);
  var width = elm.width();
  var tel = 1;
  var smw = (width - 150) + 'px';
  jQuery('.ui-gs-panel', raw).css('left', width + 'px').hide();
  jQuery('.ui-gs-panel li', raw).css(width, smw);
  jQuery('.ui-gs-main li', raw).click(function() {
   var panel = jQuery(this).attr('rel');
   jQuery('.ui-gs-main li', raw).each(function() {
    var el = jQuery(this);
    if(el.hasClass('ui-active')) el.removeClass('ui-active');
   });
   jQuery(this).addClass('ui-active');
   jQuery('.ui-gs-main', raw).animate({ width: "150px" }, 1000);
   jQuery('.' + panel, raw).css('z-index', tel += 1).show().animate({ 'left': '150px' }, 1000, function() {
    jQuery('.ui-gs-panel', raw).each(function() {
     if(jQuery(this).hasClass(panel) == false) {
      jQuery(this).css('left', width + 'px');
      jQuery(this).css('z-index', '1');
      jQuery(this).hide();
     }
    });
   });
  });
 });
};
jQuery.fn.backhome = function() {
 return this.each(function() {
  var raw = this;
  var width = jQuery(raw).width();
  jQuery('.ui-active', raw).each(function() {
   jQuery(this).removeClass('.ui-active');
  });
  jQuery('.ui-gs-main', raw).animate({width: '100%'}, 1000).removeClass('ui-active');
   jQuery('.ui-gs-panel', raw).each(function() {
   jQuery(this).animate({'left': width + 'px'}, 1000, function() {
    $(this).hide();
   });
  });
 });
};
</script>
<style type="text/css">
body{font: 12px "Century Gothic", Tahoma, Verdana, Arial, sans-serif;margin: 0;overflow-x: hidden;}
#container{display: block;width: 100%;height: 500px;border-top: 5px solid #ccc;border-bottom: 5px solid #ccc;overflow-x: hidden;position: relative;}
.ui-gs-main{display: block;width: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}
.ui-gs-main ul{list-style: none;margin: 0;padding: 0;}
.ui-gs-main ul li{display: block;width: 100%;padding-top: 15px;padding-bottom: 15px;text-indent: 25px;border-bottom: 1px solid #ccc;}
.ui-gs-main ul li: hover{background: #f0f2f5;}
.ui-gs-panel{display: block;width: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}
.ui-gs-panel ul{list-style: none;margin: 0;padding: 0;}
.ui-gs-panel ul li{display: block;width: 100%;padding-top: 15px;padding-bottom: 15px;text-indent: 25px;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;background: white;}
.ui-gs-panel ul li: hover{background: #f0f2f5;}
li.ui-active{background: #f0f2f5;}
</style>
<script type="text/javascript">
$(document).ready(function() {
 $('#container').grooveshark();
 $('#backhome').click(function() {
  $('#container').backhome();
 });
});
</script>
 </head>
 <body>
  <div id="container">
   <div class="ui-gs-main">
    <ul>
     <li rel="home">主页</li>
     <li rel="over_ons">作品</li>
     <li rel="portfolio">链接</li>
     <li rel="contact">联系</li>
    </ul>
   </div>
   <div class="ui-gs-panel home">
    <ul>
     <li>最新更新</li>
     <li>热点排行</li>
     <li>时事政治</li>
     <li>喜欢电影</li>
     <li>我的音乐</li>
     <li>我的收藏</li>
     <li>程序人生</li>
     <li>娱乐天地</li>
     <li>婚姻生活</li>
     <li>五花八门</li>
    </ul>
   </div>
   <div class="ui-gs-panel over_ons">
    <ul>
     <li>jquery</li>
     <li>ASP</li>
     <li>PHP</li>
     <li>JAVA</li>
     <li>JSP</li>
     <li>AJAX</li>
     <li>ASP.NET</li>
     <li>VC++</li>
     <li>C#</li>
    </ul>
   </div>
   <div class="ui-gs-panel portfolio">
    <ul>
     <li>百度</li>
     <li>新浪</li>
     <li>网易</li>
     <li>腾讯</li>
     <li>搜狐</li>
     <li>天涯</li>
    </ul>
   </div>
   <div class="ui-gs-panel contact">
    <ul>
     <li>北京</li>
     <li>上海</li>
     <li>天津</li>
     <li>重庆</li>
     <li>成都</li>
     <li>广州</li>
     <li>常州</li>
     <li>深圳</li>
     <li>杭州</li>
     <li>无锡</li>
     <li>郑州</li>
     <li>武汉</li>
    </ul>
   </div>
  </div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 #Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 #Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 #Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 #Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 #Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 #Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
jQuery插件Validation表单验证详解
2018/05/26 jQuery
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python读取Excel实例详解
2018/08/17 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
详解Python中的文件操作
2021/01/14 Python
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
医院办公室主任职责
2013/12/29 职场文书
机关财务管理制度
2014/01/17 职场文书
学校大课间活动方案
2014/01/30 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
Python 内置函数速查表一览
2021/06/02 Python
总结Python连接CS2000的详细步骤
2021/06/23 Python
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS