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广告代码
May 30 Javascript
jquery实现心算练习代码
Dec 06 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
canvas实现图像放大镜
Feb 06 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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
php桌面中心(二) 数据库写入
2007/03/11 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
Js动态创建div
2008/09/25 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python实现rsa加密实例详解
2017/07/19 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
大四本科生的自我评价
2013/12/30 职场文书
中学清明节活动总结
2014/07/04 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
家长给老师的感谢信
2015/01/20 职场文书
社区活动总结
2015/02/04 职场文书
2015年助残日活动总结
2015/03/27 职场文书
Python语言内置数据类型
2022/02/24 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android