jQuery菜单插件用法实例


Posted in Javascript onJuly 25, 2015

本文实例讲述了jQuery菜单插件用法。分享给大家供大家参考。具体如下:

这里要分享的是一个菜单插件,在http://plugins.jquery.com/keleyi/ 看到的,使用找个插件可以制作页面底部向上弹出的菜单,不一定在页底,还有多种其他方式。

jQuery菜单插件js文件:

/*!
* Keleyi(jQuery Menu)
* version: 0.1.6
* Copyright (c) 2013 KeLeyi
*/
(function ($) {
  $.fn.keleyi = function (options) {
    var settings = $.extend({
      width: '986px',
      margin: '0px auto',
      isAutoAddTriangle: true,
      item_background_color_hover: '#005500',
      item_background_color: 'transparent',
      item_width: 'auto',
      item_margin: '0px 0px 0px 10px',
      bar_height: 'auto',
      bar_position: 'fixed',
      bar_background_color: "#008000",
      bar_bottom: "0px",
      mainItem_color: "white",
      subItem_color:"white"
    }, options);
    $(this).addClass("keleyi-menu");
    $(this).css({ "width": settings.width, "margin": settings.margin });
    $(this).wrap("<div class='keleyi-menubar'></div>");
    var k_bar = $(this).parent();
    k_bar.css({ "background-color": settings.bar_background_color
    , "height": settings.bar_height, "position": settings.bar_position
    , "bottom": settings.bar_bottom, "min-width": settings.width
    });
    if (! -[1, ] && !window.XMLHttpRequest) {
      if (k_bar.css("position") == "fixed") {
        ie6FixedBottom(k_bar, settings.bar_bottom);
      }
    }
    $(this).parent().append("<div style='width:100%;clear:both;height:0px;overflow:hidden'></div>");
    $(this).find(">li").css({ "width": settings.item_width, "background-color": settings.item_background_color, "margin": settings.item_margin
    , "padding": "0px", "white-space": "nowrap", "height": "20px", "float": "left", "text-align": "center"
    , "display": "inline-block", "position": "relative"
    });
    $(this).find(">li a").css({ "color": "white", "line-height": "20px"
    , "display": "block", "font-size": "14px"
    });    
    if (settings.isAutoAddTriangle)
      $(this).find(">li").has('ul').find("a:first").append("<b></b>");
    $(this).find(">li").find("a:first").css({ "width": "100%", "overflow": "hidden", "color": settings.mainItem_color });
    $(this).find(">li").find("b").css({ "border-color": ("transparent transparent " + settings.mainItem_color) })
    $(this).find(">li ul").css({ "padding": "0px", "list-style-type": "none"
    , "background-color": "transparent", "position": "absolute", "display": "none"
    });
    $(this).find(">li").find("li a").css({ "color": settings.subItem_color });
    $(this).find(">li>a").mouseover(function () {
      $(this).parent().css({ "background-color": settings.item_background_color_hover });
      var k_ul = $(this).parent().find("ul");
      if (k_ul.length < 1)
        return;
      k_ul.css({ "background-color": settings.item_background_color_hover, "top": $(this).parent().position().top - (k_ul.height())
        , "left": "0px", "margin": "0px"
      }).show();
      if (k_ul.width() < $(this).parent().width())
        k_ul.width($(this).parent().width());
    });
    $(this).find(">li").mouseleave(function () {
      $(this).find("ul").hide();
      $(this).css("background-color", settings.item_background_color);
    });
    function ie6FixedBottom(fixedobj, bottommargin) {
      fixedobj.css({ "position": "absolute" });
      var k_bm = new Number;
      k_bm = Number(bottommargin.substring(0, bottommargin.length - 2));
      var obj = fixedobj[0];
      function setStyleTop() {
        obj.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight
        - obj.offsetHeight - (parseInt(obj.currentStyle.marginTop, 0) || k_bm) - (parseInt(obj.currentStyle.marginBottom, 0) || k_bm)
      }
      window.onscroll = function () { setStyleTop(); }
      window.onresize = function () { setStyleTop(); }
    }
  }
} (jQuery));

插件css文件:

div.keleyi-menubar{width:100%;visibility:visible;padding:0px;}
ul.keleyi-menu{list-style-type:none;padding:0px;}
ul.keleyi-menu a{text-decoration:none}
ul.keleyi-menu a:hover{text-decoration:underline;}
ul.keleyi-menu>li li{padding:0px;}
ul.keleyi-menu li b{
display:inline-block;
width: 0;
height: 0;
border-width: 4px 4px;
border-style: solid;
border-color: transparent transparent #fff;
font-size: 0;
line-height: 0;
-moz-transition: -moz-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
vertical-align:text-top;
margin-left:5px
}

jQuery菜单插件例子:

<!DOCTYPE html>
<html>
<head>
  <title>Keleyi Menu (jQuery Plugin)0.1.6 Demo- keleyi.com</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.keleyi.js"></script>
  <link href="jquery.keleyi.css" type="text/css" rel="Stylesheet" />
  <style>body{margin: 0px;}</style>
</head>
<body>
  <div style="text-align:center;width:986px;margin:0px auto;">
    <h1>
      Keleyi</h1>
    A jQuery Menu Plugin
    <h2>Browser Support</h2>
    Keleyi 0.1.4-0.1.6:IE6+,Chrome,Firefox,Opera,Safari<br />
    Keleyi 0.1.3:IE8+(not support IE6),Chrome,Firefox,Opera,Safari
  </div>
  <div style="height: 360px;background-color: #66FF66;"></div>
  <ul id="keleyi-menu">
    <li><a href="">Home</a></li>
    <li><a href="http://plugins.jquery.com/keleyi/">jQuery</a>
      <ul>
        <li><a href="https://github.com/keleyi/keleyi">github</a></li>
      </ul>
    </li>
    <li><a href="/keleyi/">Keleyi</a></li>
    <li><a href="/keleyi/demo/11.htm">Demo 11</a></li>
    <li><a href="/keleyi/demo/">Demo</a>
      <ul>
        <li><a href="/keleyi/demo/1.htm">Demo 1</a></li>
        <li><a href="/keleyi/demo/2.htm">Demo 2</a></li>
        <li><a href="/keleyi/demo/3.htm">Demo 3</a></li>
        <li><a href="/keleyi/demo/4.htm">Demo 4</a></li>
        <li><a href="/keleyi/demo/5.htm">Demo 5</a></li>
      </ul>
    </li>
    <li><a href="/keleyi/demo/6.htm">Demo 6</a>
      <ul>
        <li><a href="/keleyi/demo/7.htm">Demo 7</a></li>
        <li><a href="/keleyi/demo/8.htm">Demo 8</a></li>
        <li><a href="/keleyi/demo/9.htm">Demo 9</a></li>
        <li><a href="/keleyi/demo/10.htm">Demo 10</a></li></ul>
    </li>
    <li><a href="/keleyi/demo/12.htm">Demo 12</a></li>
    <li><a href="/keleyi/demo/0x1x5/">Demo 13</a></li>
  </ul>
  <div style="height: 900px; visibility: visible; background-color: Olive"></div>
  <script type="text/javascript">
    $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
  , "margin": "0px auto 0px 0px", "item_margin": "0px", "mainItem_color": "black","subItem_color":"black","bar_background_color":"#ffffff","item_background_color_hover":"#eeeeee"
    });
  </script>
</body>
</html>

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

Javascript 相关文章推荐
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
js实现表格筛选功能
Jan 18 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
javascript单例模式的简单实现方法
Jul 25 #Javascript
JavaScript类继承及实例化的方法
Jul 25 #Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 #Javascript
javascript去掉代码里面的注释
Jul 24 #Javascript
Jquery简单分页实现方法
Jul 24 #Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 #Javascript
Css3制作变形与动画效果
Jul 24 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
php生成excel列序号代码实例
2013/12/24 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php错误日志简单配置方法
2016/07/11 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
DWR Ext 加载数据
2009/03/22 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
综合素质的自我鉴定
2013/10/07 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
爱心捐书活动总结
2014/07/05 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
学生病假条怎么写
2015/08/17 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
Pygame Event事件模块的详细示例
2021/11/17 Python
Python学习之异常中的finally使用详解
2022/03/16 Python
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle