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
Mar 09 Javascript
javascript常用代码段搜集
Dec 04 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
js函数调用的方式
2014/05/06 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python selenium xpath定位操作
2020/09/01 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
NET程序员上机面试题
2015/05/23 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
大学生英语演讲稿
2014/04/24 职场文书