向上弹出菜单jQuery插件

插件名:柯乐义
英文名:Keleyi
js文件名称:jquery.keleyi.js
插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单。


支持浏览器:

keleyi 0.1.4版本支持IE6以及以上、Chrome、火狐(Firefox)、欧朋(Opera)、Safari等浏览器,也支持IE6

keleyi 0.1.3版本支持IE8以及以上、Chrome、火狐(Firefox)、欧朋(Opera)、Safari等浏览器,不支持IE6。


示例查看:http://keleyi.com/keleyi/

更多示例:0 1 2 3 4 5 6 7 8 9 10 11 12

从示例可以看出,Keleyi这个菜单插件使用方便,可以灵活自定义多种样式,包括颜色,位置,菜单项宽度等等。

下面给出一个示例的HTML文件代码:

<!DOCTYPE html>
<html>
<head>
<title>Keleyi(jQuery Menu Plugin) - keleyi.com</title><base target="_blank" /> 
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<link href="http://keleyi.com/keleyi/inc/jquery.keleyi.css" type="text/css" rel="Stylesheet" />
<style>
body
{
margin: 0px;
overflow:scroll;
}
</style>
</head>
<body>
<div style="text-align:center"><h1>Keleyi</h1>
A jQuery Menu Plugin 
</div>
<div style="height:360px;"></div>
<ul id="keleyi-menu">
<li><a href="http://keleyi.com">Home</a></li>
<li><a href="http://keleyi.com/menu/webqd/">Web</a>
<ul>
<li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>
<li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>
<li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>
</ul>
</li>
<li><a href="http://keleyi.com/keleyi/">Keleyi</a></li>
<li><a href="http://keleyi.com/keleyi/demo/">Demo</a>
<ul>
<li><a href="http://keleyi.com/keleyi/demo/1.htm">Demo 1</a></li>
<li><a href="http://keleyi.com/keleyi/demo/2.htm">Demo 2</a></li>
<li><a href="http://keleyi.com/keleyi/demo/3.htm">Demo 3</a></li>
<li><a href="http://keleyi.com/keleyi/demo/4.htm">Demo 4</a></li>
<li><a href="http://keleyi.com/keleyi/demo/5.htm">Demo 5</a></li>
<li><a href="http://keleyi.com/keleyi/demo/6.htm">Demo 6</a></li>
<li><a href="http://keleyi.com/keleyi/demo/7.htm">Demo 7</a></li>
</ul>
</li>
<li><a href="http://keleyi.com/keleyi/demo/8.htm">Demo 8</a></li>
<li><a href="http://keleyi.com/keleyi/demo/9.htm">Demo 9</a></li>
</ul>
<div style="height:900px; visibility: visible;
</div>
<script type="text/javascript" src="http://keleyi.com/keleyi/inc/jquery.keleyi.js"></script>
<script type="text/javascript">
$("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
, "margin": "0px auto 0px 0px"
});
</script>
</body>
</html>


插件的使用一:
使用这个插件,需要引用这3个文件(一个CSS文件,一个jQuery库,和一个插件js文件):
<link href="http://keleyi.com/keleyi/inc/jquery.keleyi.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/inc/jquery.keleyi.js"></script>

插件的使用二:
从上面的代码看出,这个菜单的HTML代码非常简洁,格式如下:
<ul id="keleyi-menu">

<li><a href="http://keleyi.com">主菜单项一</a></li>
<li><a href="http://keleyi.com/keleyi/">主菜单项二</a></li>

<li><a href="http://keleyi.com/keleyi/demo/">主菜单项三</a>
<ul>
<li><a href="http://keleyi.com/keleyi/demo/1.htm">子菜单项1</a></li>
<li><a href="http://keleyi.com/keleyi/demo/2.htm">子菜单项2</a></li>
<li><a href="http://keleyi.com/keleyi/demo/3.htm">子菜单项3</a></li>
<li><a href="http://keleyi.com/keleyi/demo/4.htm">子菜单项4</a></li>
<li><a href="http://keleyi.com/keleyi/demo/5.htm">子菜单项5</a></li>
<li><a href="http://keleyi.com/keleyi/demo/6.htm">子菜单项6</a></li>
<li><a href="http://keleyi.com/keleyi/demo/7.htm">子菜单项7</a></li>
</ul>
</li>

</ul>

插件的使用三:
然后就是定义菜单的代码:
<script type="text/javascript">
$("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
, "margin": "0px auto 0px 0px"
});
</script>

这样就可以在页面上显示一个特别的向上弹出菜单了。


菜单大全

 

 

原文:http://keleyi.com/a/bjac/c4oc8tyo.htm

转载于:https://www.cnblogs.com/wangyongx/p/5016375.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/258005.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle在线sql数据库设计,一款在线ER模型设计工具,支持MySQL、SQLServer、Oracle、Postgresql...

在线QQ客服&#xff1a;1922638专业的SQL Server、MySQL数据库同步软件介绍一个在线ER模型生成工具&#xff0c;该工具可以在线为多个数据库的DDL文件生成ER模型图&#xff0c;并支持MySQL&#xff0c;SQLServer&#xff0c;Oracle&#xff0c;PostgreSQL和其他数据库。主要功能…

_M_invoke(_Index_tuple_Indices...)

2019独角兽企业重金招聘Python工程师标准>>> [hadoopiZ25s7cmfyrZ C_script]$ cat test_thread_a.cpp #include <iostream> #include <atomic> #include <thread> #include <vector>std::atomic<int> global_counter(0);void increa…

十年后2023年再读这篇文章,看看我将会怎么样?

http://blog.csdn.net/wojiushiwo987/article/details/8453881看到一篇文章不错【清华差生10年奋斗经历】 &#xff0c;写给将要工作的自己&#xff0c;十年后2023年再读这篇文章&#xff0c;看看我将会怎么样&#xff1f; 在2012年收关时刻&#xff0c;看到如此激励的文章&…

1203正规式转换为有穷自动机

1 #include<stdio.h>2 #include <ctype.h>3 #define ok 14 #define error 05 #define MAXREGLUARLONG 406 #define MAXSTATELONG 40 7 #define MAXCAHRSLONG 40 8 typedef int state;9 int iCurrentState0; //初态以1开始10 int iPreState0;11 in…

fasttext的基本使用 java 、python为例子

fasttext的基本使用 java 、python为例子 今天早上在地铁上看到知乎上看到有人使用fasttext进行文本分类&#xff0c;到公司试了下情况在GitHub上找了下&#xff0c;最开始是c版本的实现&#xff0c;不过有Java、Python版本的实现了&#xff0c;正好拿下来试试手&#xff0c; p…

oracle spring 分页查询,SpringJDBC 调用oracle 通用存储过程分页

我博客前面有写道SpringJDBC调用通用的Oracle存储过程,今天来讲一下通用的Java存储过程带分页的功能,其中里面还有动态查询的SQL拼接,好的,先上代码1.Java代码Autowiredprivate JdbcTemplate jdbcTemplate;/**分页查询* return*/ResponseBodyRequestMapping(value "/find…

宝宝头三年至关重要,不看悔掉肠子

http://www.nowamagic.net/librarys/eight/posts/1885以下是一个早教工作者分享他关于现代父母早期教育中出现的问题和多数父母的误区。正如作者问自己的&#xff1a;“在孩子人生最重要的头三年&#xff0c;我做对了吗&#xff1f;在我的引导下&#xff0c;她能保持强烈的探索…

2015年底总结

2015-12-06 16:17&#xff0c;今天是周日&#xff0c;不需要加班的&#xff0c;到公司看看书&#xff0c;写写代码的&#xff0c;突然想到又是年底了&#xff01;需要写点东西来记录总结一下2015年了 年初的时候&#xff0c;入职现在这家成都游戏公司&#xff0c;到现在差不多也…

python脚本

01.用户三次登录锁定猜年龄游戏02.购物车省县市三级联动03.函数、文件操作实现数据增删改查---low版本04.ATM购物商城05.模拟计算器持续更新中...脚本很low&#xff0c;但我一直在学。。。转载于:https://blog.51cto.com/lyndon/1947437

oracle 命令日志输出,ORACLE常用命令日志

第一章&#xff1a;日志管理1.forcing log switchessql> alter system switch logfile;2.forcing checkpointssql> alter system checkpoint;3.adding online redo log groupssql> alter database add logfile [group 4]sql> (/disk3/log4a.rdo,/disk4/log4b.rdo) …

[VMware WorkStation]虚拟机网络

1、简介&#xff1a; vmware为我们提供了三种网络工作模式&#xff0c;它们分别是&#xff1a;Bridged&#xff08;桥接模式&#xff09;、NAT&#xff08;网络地址转换模式&#xff09;、Host-Only&#xff08;仅主机模式&#xff09;。在我安装了vmware workstation player 1…

阿里查出售假店主并索赔140万,这次是大数据帮的忙

阿里巴巴将平台上一家曾出售假货的网店起诉至深圳市龙岗区法院&#xff0c;以“违背平台不得售假约定、侵犯平台商誉”为由索赔140万元人民币。此案为国内首例电商平台起诉售假店主案。 阿里巴巴目前已经准备了一份超长起诉清单&#xff0c;计划以违背合同约定、侵犯商誉为由&a…

oracle 升级前备份,rac(exadata)升级前的备份及LVM快照的恢复

1、热备所有数据库热备脚本&#xff1a;10.1.1.200&#xff0c;/backup/scripts/whole_db_backup.sh2、在每个计算节点执行dbserver_backup.sh脚本Run script "dbserver_backup.sh" in each compute node. The script takes backup of "/boot" (to ROOT f…

我心中的MySQL DBA

原文网址链接&#xff1a;http://wangwei007.blog.51cto.com/68019/1718311 MySQL是一个跨平台的开源关系型数据库管理系统&#xff0c;目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低&#xff0c;尤其是开放源码这一特点&#xff0c…

Visual Studio 2015 前瞻 属性初始化赋值!

通常我们建立属性的时候如果带初始化值的时候我们经常会这样处理。 class MyClass{private string _name "hello world!";public string Name {get{return _name;}set{_name value;}}} 或者也可以这样写 &#xff1a; class MyClass{public string Name { set; get…

火狐中的CSS Grid Inspector新增强大的功能

2019独角兽企业重金招聘Python工程师标准>>> 上周&#xff0c;我谈到了日常的网站浏览我用Firefox&#xff0c;但是在切图网做前端开发的时候我会用Chrome。 随着每个版本&#xff0c;FF Nightly在开发工具箱中有一些越来越棒的工具&#xff0c;这些更新使Firefox成…

Linux内核态之间进程通信,内核态和用户态通信(二)--实现

本文主要使用netlink套接字实现中断环境与用户态进程通信。系统环境&#xff1a;基于linux 2.6.32.27 和 linux 3.16.36Linux内核态和用户态进程通信方法的提出和实现用户上下文环境运行在用户上下文环境中的代码是可以阻塞的&#xff0c;这样&#xff0c;便可以使用消息队列和…

上下文无关文法

在计算机科学中&#xff0c;若一个形式文法 G (N, Σ, P, S) 的产生式规则都取如下的形式&#xff1a;V -> w&#xff0c;则称之为上下文无关文法&#xff08;英语&#xff1a;context-free grammar&#xff0c;缩写为CFG&#xff09;&#xff0c;其中 V∈N &#xff0c;w∈…

centos 安装mysql时错误unknown variable #39;defaults-file=/opt/redmine-2.6.0-2/mysql/my.cnf#39;...

找到my.cnf所在目录。运行 chmod 664 my.cnf&#xff0c;再启动mysql成功

p5js可以在linux上运行吗,在linux上使用python运行phantomjs

我跟随this link&#xff0c;现在当我输入phan然后输入tab(\t)时&#xff0c;它会自动完成幻影JS。在但是&#xff0c;如果我运行phantomJS -v或phantomJS --version&#xff0c;我得到&#xff1a;bash: /usr/local/bin/phantomjs: /lib/ld-linux.so.2: bad ELF interpreter: …