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 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
客户经理岗位职责
2013/12/08 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
火锅店的活动方案
2014/08/15 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
室外天线与收音机天线杆接合方法
2022/04/05 无线电