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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
基于canvas实现手写签名(vue)
May 21 Javascript
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
探讨方法的重写(覆载)详解
2013/06/08 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
Python聚类算法之DBSACN实例分析
2015/11/20 Python
详谈python http长连接客户端
2017/06/12 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
pytorch 共享参数的示例
2019/08/17 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python如何测试stdout输出
2020/08/10 Python
python如何将图片转换素描画
2020/09/08 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
留学自荐信
2013/10/10 职场文书
应届生人事助理求职信
2013/11/09 职场文书
高级电工工作职责
2013/11/21 职场文书
事业单位辞职信范文
2014/01/19 职场文书
法学专业求职信
2014/07/15 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
开学典礼致辞
2015/07/29 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers