头像

jQuery左键和右键菜单插件jquery-menu

来源:http://www.huoseo.com/js/2865.html 18***38 2017-08-29 01:02浏览(401) 收藏

一款jQuery左键和右键菜单插件jquery-menu,可以通过设置指定的区域或鼠标左右键事件,来显示不同的区域菜单内容,也可以设置菜单的多层级子菜单。
jQuery左键和右键菜单插件jquery-menu
分类:导航菜单 > 多级菜单 难易:初级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ2589223951直接充值

查看演示 下载资源: 12 下载资源 下载积分: 20 积分

页面的head部分,需引入菜单样式,并设置好演示页面的元素样式,代码如下:

<link rel="stylesheet" type="text/css" href="css/jquery-menu.css">
<style type="text/css">
body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
#left{
	width: 45%;
	height: 300px;
	display: inline-block;
	background: #fff;
}
#right{
	width: 45%;
	height: 300px;
	display: inline-block;
	background: #fff;
	margin-left: 20px;
}
#left h3,#right h3{
	line-height: 300px;
	text-align: center;
}
</style>

页面的body部分,需设置好菜单触发的区域div容器和菜单的具体内容,代码如下:

<div style="width: 100%;padding: 1em 2em;">
	<div id="left" class="callback1">
		<h3>使用鼠标 右键 点击这个区域</h3>
	</div>
	<div id="right" class="callback2">
		<h3>使用鼠标 左键 点击这个区域</h3>
	</div>
</div>
<div id="callbackmenu">
    <ul>
        <li id="MenuItem1"><a href="#Item1">菜单 1</a></li>
        <li class="disabled" id="MenuItem2"><a href="#Item2">菜单 2</a></li>
        <li id="MenuItem3"><a href="#Item3">菜单 3</a>
            <ul>
                <li id="MenuItem3.1"><a href="#Item3.1">菜单 3.1</a></li>
                <li id="MenuItem3.2"><a href="#Item3.2">菜单 3.2</a></li>
                <li id="MenuItem3.3"><a href="#Item3.3">菜单 3.3</a>
                    <ul>
                        <li id="MenuItem3.3.1"><a href="#Item3.3.1">菜单 3.3.1</a></li>
                        <li id="MenuItem3.3.2"><a href="#Item3.3.2">菜单 3.3.2</a></li>
                        <li id="MenuItem3.3.3"><a href="#Item3.3.3">菜单 3.3.3</a></li>
                        <li id="MenuItem3.3.4"><a href="#Item3.3.4">菜单 3.3.4</a></li>
                    </ul>
                </li>
                <li id="MenuItem3.4"><a href="#Item3.4">菜单 3.4</a></li>
            </ul>
        </li>
        <li id="MenuItem4" class="separator"><a href="#Item4">菜单 4</a></li>
    </ul>
</div>

页面的底部,需引入jQuery库和两个JS文件,并设置左键和右键菜单的事件响应,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverintent.js"></script>
<script type="text/javascript" src="js/jquery-menu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.callback1').catMenu({
        menu: 'callbackmenu',
        on_select: function(e) {
            alert("You clicked on a menu item!\n\nThe item's action is: " + e.action + "\nThe item's id is: " + e.id);
        }
    });
    $('.callback2').catMenu({
        menu: 'callbackmenu',
        mouse_button: 'left',
        on_select: function(e) {
            alert("You clicked on a menu item!\n\nThe item's action is: " + e.action + "\nThe item's id is: " + e.id);
        }
    });
});
</script>
最新交易
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

1 2
如何中彩票 www.586147.com-微彩66.-| www.8984.com-北京福彩3d-| www.365847.cc-天空渐变图彩铅的| www.569299.com-绿好彩烟多少钱一包| www.680269.com-体彩害死人-| www.959532.com-小站宝彩票正规吗| www.08500.cc-139体彩-| www.81551.cc-柬埔寨博彩招聘骗局| www.078013.com-中福时时彩怎么提现| www.209801.com-大发快三代理返点| www.217402.com-彩神uv使用教程| www.337122.com-2017彩票弃奖| www.481000.com-移动彩印设置在哪里| www.659269.com-彩之星官网-| www.795979.com-廊坊鸿运的彩票专栏| www.997048.com-海南体彩网-| www.in80.com-齐鲁风采福利彩票| www.08ja.com-七星彩小说评论| www.877256.com-ha0l23彩票网| www.959550.com-小站宝彩票在哪注册| 彩票驿站www.621341.com| www.mm74.com-河北快三走势图电视| www.m80.cn-彩票999官网| www.50fb.com-93彩票安卓版下载| www.664.org-天津时时彩计划个位| www.871841.com-q彩app真的吗| www.957431.com-彩01彩票软件下载| 13e彩票www.205059.com| www.nx85.com-北京快三三同号遗漏| www.s09.com-购买彩票app| www.43ph.com-足彩培训-| www.8842.cm-胜负彩19年1月| www.396685.com-多彩宝官网-| www.873634.com-掌上彩票苹果版| www.957024.com-下载7k官方彩票| 大赢家彩票网www.83033l.com| www.qj90.com-快三500彩票| www.23fd.com-132彩升级-| www.059.com-湖北快三合值跨度图| www.3715.top-天空彩票与你同行| www.465227.com-看陆和彩开奖| www.04ia.com-苹果彩票一我的账户| www.345242.com-淘宝现在能买彩票吗| www.617503.com-延吉彩票站转让信息| www.267996.com-8号彩票-| www.371488.com-577彩票是真的吗| www.507072.com-亿彩国际-| www.581124.com-江苏七星彩开奖号| www.673058.com-中国彩票彩吧助手| www.779905.com-中彩易软件-| www.874319.com-中央2台福彩主持人| www.986816.com-彩吧vip下载| www.sf.com-上海彩票快三| www.822249.com-111彩票cc-| www.995871.com-80彩票是骗人的吗| www.28585.cc-什么人不能买彩票| www.055070.com-中国体育彩票头像| www.151364.com-彩漂的成分-| www.104611.com-go彩票可信吗| www.fd66.com-易彩快三规律| www.09pz.cc-彩民之家论坛手机网| www.79pl.com-500彩票网500| www.276208.com-七星彩复式投8| www.69391.cc-英国幸运五星彩官网| www.88088.com-118彩票平台网址| www.i66.xyz-彩名堂计划-| www.702190.com-网络彩票有没有人管| www.639547.com-7星彩所有开奖结果| www.30433.com-体彩预测总汇| www.424545.com-天天赢彩票网| www.085230.com-湖北福彩领奖地址| www.259779.com-甘肃省体彩助手| www.41ii.com-海南七星彩投注站| www.0410.pw-高频彩怎么玩都是输| www.7186.com-彩宝价值排位| www.36066.com-苹果彩票最新线路| www.91935.cc-1717广东彩王| www.096159.com-排列三众彩网杀码| www.618471.com-开体彩店标准| www.344301.com-时时彩负盈利打法| www.345033.com-棋牌彩票排名| www.754529.com-想买彩票买什么号码| www.7388.loan-博彩为什么合法| www.167788.com-广西快三开奖结果今| www.899392.com-博发彩票网手机版| www.cai114.com-贵州快三今天开奖| www.31561.com-麒麟彩票ios版| www.262.cc-体彩排三图谜总汇| www.6411.cn-基诺型彩票算法| www.884212.com-安徽快三2期计划| www.oj85.com-100彩票-| www.962908.com-彩圣福彩3d今日字| www.9132.online彩壹万彩票-| www.56323.com-福铭彩票-| www.014114.com-703彩票下载| www.105695.com-时时彩中彩票软件| www.201069.com-浙江福彩12选5| www.297292.com-大发快三投注心得| www.366836.com-体彩实体店图片| www.271338.com-日版软包好彩多少钱| www.369649.com-hai123彩票网| www.474864.com-中国彩票还能信吗| www.555887.com-福彩七乐彩机选号码| www.612517.com-1516彩票网下载| www.172394.com-彩票兼职骗局揭秘| www.185501.com-快三有没有假| www.513381.com-口袋彩店下载| www.65sz.com-足彩竞彩十四场| www.652022.cc-福彩周即开奖| www.738889.com-江苏快三微信群跟买| www.822867.com-足球体彩竞彩| www.885090.com-家彩网3d胆码预测| www.944572.com-信博快三骗局| www.983843.com-广东福彩快十走势图| www.cp5958.com-福彩快三助手破解版| www.mj88.com-好彩123-| www.2pf.com-彩票站帮忙买彩票| www.697823.com-时时彩赚钱秘籍一星| www.791842.com-梦想彩票站网址| www.gf1.com-内蒙古福彩中心官网| www.uk15.com-彩票大赢家推广码| www.9709.vip-彩票19019-| 彩票坊www.022ah.cc| www.571192.com-青蛙彩票资料| www.632019.com-七彩虹代表什么生肖| www.905373.com-91彩票倒闭了吗| www.cp852.cc-彩神8快3大发| www.410338.com-体彩开奖查看软件| www.181998.com-快三平台软件| www.968384.com-英国时时彩资讯网| www.687776.com-鸿彩网平台关闭| www.42317.com-彩票12靠谱吗| www.88672.cc-梦见别人中彩票兑奖| www.1333.win-上周福彩出什么号码| www.8611.loan-重庆百变王牌百宝彩| www.36691.com-澳彩水位划分| www.87795.com-彩网网-| www.870258.com-福彩3d组合胆拖| www.352516.com-亿人黑彩平台怎么样| www.320577.com-新利彩票软件下载| www.455239.com-香港皇冠国际彩票| www.201490.com-在手机上购七星彩| www.817590.com-浙江伊兴快三助手| www.273547.com-pc蛋蛋是福彩吗| www.cy88.com-江苏快三怎么下载| www.812800.cc-51时时彩网-| www.981835.com-头奖彩票新闻| www.cp30.com-乐彩神app下载| www.215131.com-在线投注快三平台| www.317087.com-中华彩票网手机版| www.155599.com-上海快三稳赚作弊| www.163708.com-中华彩票时时彩| www.838359.com-彩钢瓦补漏防水| www.912390.com-做私彩代理能赚多少| www.cp0768.com-快三定胆口诀逢3| www.585011.com-迷彩网名大全| www.157687.com-竞彩足球app没了| www.236782.com-68彩票软件-| www.989514.com-51彩票app苹果| www.ct16.com-彩神是怎样的骗局| www.217108.com-快三最多出过多少龙| www.521698.com-福彩票双色球走势图| www.6098.cm-釉上彩颜料-| www.578110.com-用酷彩吧买彩票|