jQuery多级下拉树状菜单资源-CSDN文库

共30个文件

png：11个

gif：8个

jpg：5个

jQuery

树状菜单

4星 · 超过85%的资源需积分: 50 138 浏览量 2014-07-25 19:34:46 上传评论 1 收藏 57KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery多级下拉树状菜单.zip （30个子文件）

jiaoben1943

index.html 9KB

inc

jquery.hoverIntent.js 5KB

mbMenu.js 22KB

jquery.metadata.js 4KB

images

bgnd_sel_4.png 208B

header_bgnd.jpg 657B

box_menu_over.png 4KB

bgnd_sel_3.jpg 353B

bgnd_sel_1.jpg 371B

browser.png 4KB

bgnd_sel_2.jpg 331B

menuArrow_w.gif 52B

DV_Tools.jpg 6KB

menuArrow.gif 58B

box_top.png 21KB

ico

icon_14.png 402B

icon_13.png 615B

Applet.gif 219B

24-image-add.png 859B

iconDone.png 724B

16-member-remove.png 357B

buttonfind.gif 384B

blank.gif 49B

24-tag-add.png 345B

bgColor.gif 210B

0682.gif 1KB

24-book-blue-check.png 372B

ico_view.gif 988B

css

menu_red.css 5KB

menu_black.css 6KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery多层次的树状菜单 - 站长素材</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="inc/jquery.metadata.js"></script> <script type="text/javascript" src="inc/mbMenu.js"></script> <script type="text/javascript" src="inc/jquery.hoverIntent.js"></script> <link rel="stylesheet" type="text/css" href="css/menu_red.css" title="styles1" media="screen" /> <style type="text/css"> body .style a{ color:gray; font-family:sans-serif; font-size:13px; text-decoration:none; } .menu{ display:none; } </style> <script type="text/javascript"> /* * DEFAULT OPTIONS * options: { template:"yourMenuVoiceTemplate", --> the url that returns the menu voices via ajax. the data passed in the request is the "menu" attribute value as "menuId" additionalData:"", --> if you need additional data to pass to the ajax call menuSelector:".menuContainer", --> the css class for the menu container menuWidth:150, --> min menu width openOnRight:false, --> if the menu has to open on the right insted of bottom iconPath:"ico/", --> the path for the icons on the left of the menu voice hasImages:true, --> if the menuvoices have an icon (a space on the left is added for the icon) fadeInTime:100, --> time in milliseconds to fade in the menu once you roll over the root voice fadeOutTime:200, --> time in milliseconds to fade out the menu once you close the menu menuTop:0, --> top space from the menu voice caller menuLeft:0, --> left space from the menu voice caller submenuTop:0, --> top space from the submenu voice caller submenuLeft:4, --> left space from the submenu voice caller opacity:1, --> opacity of the menu shadow:false, --> if the menu has a shadow shadowColor:"black", --> the color of the shadow shadowOpacity:.2, --> the opacity of the shadow openOnClick:true, --> if the menu has to be opened by a click event (otherwise is opened by a hover event) closeOnMouseOut:false, --> if the menu has to be cloesed on mouse out closeAfter:500, --> time in millisecond to whait befor closing menu once you mouse out minZindex:"auto", --> if set to "auto" the zIndex is automatically evaluate, otherwise it start from your settings ("auto" or int) hoverInted:0, --> if you use jquery.hoverinted.js set this to time in milliseconds to delay the hover event (0= false) onContextualMenu:function(o,e){} --> a function invoked once you call a contextual menu; it pass o (the menu you clicked on) and e (the event) }, */ $(function(){ $(".myMenu").buildMenu( { template:"menuVoices.html", additionalData:"pippo=1", menuWidth:250, openOnRight:false, menuSelector: ".menuContainer", iconPath:"ico/", hasImages:true, fadeInTime:300, fadeOutTime:100, adjustLeft:2, minZindex:"auto", adjustTop:10, opacity:.95, shadow:false, hoverIntent:200, openOnClick:false, closeOnMouseOut:true, closeAfter:500, submenuHoverIntent:100 }); }); //this function get the id of the element that fires the context menu. function testForContextMenu(el){ if (!el) el= $.mbMenu.lastContextMenuEl; alert("the ID of the element is: "+$(el).attr("id")); } </script> </head> <body bgcolor="#ffffff"> <div id="wrapper" style="width:980px;height:550px; border:1px dotted red; position:absolute; left:250px; top:30px"> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EDEDED" > <tr> <td valign="bottom"> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="container"> <tr> <td class="myMenu" align="right">  <table class="rootVoices" cellspacing='0' cellpadding='0' border='0'><tr> <td class="rootVoice {menu: 'menu_12'}" >ajax menu 12</td> <td class="rootVoice {menu: 'menu_2'}" >menu 2</td> <td class="rootVoice {menu: 'menu_3'}" >menu 3</td> <td class="rootVoice {menu: 'empty'}" onclick="window.open('http://www.jq22.com','ww');">menu 4 empty</td> </tr></table>  </td> </tr> </table> </td> </tr> </table> </div>  <div id="menu_1" class="menu"> <a data-type="title" >title menu_1.1</a>  <a href="#" class="{img: 'ico_view.gif'}" >menu_1.1 (href target _self) </a>  <a class="{action: 'document.title=(\'menu_1.2\')'}" >menu_1.2</a>  <a data-type="separator"> </a>  <a href="#" class="{action: 'document.title=(\'menu_1.3\')', disabled:true}">menu_1.3</a>  <a class="{action: 'document.title=(\'menu_1.4\')', menu:'menu_1', img: '24-book-blue-check.png'}">menu_1.4</a> </div> <div id="menu_2" class="menu"> <a data-type="title" class="{action: 'document.title=(\'menu_2.1\')', img: 'icon_13.png'}">menu_2.1 TITLE</a> <a class="{action: 'document.title=(\'menu_2.2\')'}">menu_2.2</a> <a class="{menu: 'sub_menu_1', img: 'icon_14.png'}">menu_2.3</a> <a class="{menu: 'sub_menu_2', img: '24-tag-add.png'}">menu_2.4</a> <a data-type="separator"> </a> <a class="{action: 'document.title=(\'menu_2.4\')'}">menu_2.5</a> </div> <div id="menu_3" class="menu"> <a data-type="text" > <img src="images/browser.png" alt="img" style="position:absolute;margin-top:-20px; margin-left:-25px;margin-bottom:10px"/><br/> <br/>immagini che vuoi ed altro testo che ti pare Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi felis leo, consequat et, lacinia a, facilisis sit amet,<br/><br/> </a> <a data-type="separator"> </a> <a class="{action: 'document.title=(\'menu_3.1\')', img: 'iconDone.png'}">menu_3.1</a> <a id="aaa" class="{menu:'sub_menu_2'}" >submenu</a> <a class="{action: 'document.title=(\'menu_3.4\')'}">menu_3.4 con testo veramente molto lungo</a> </div> <div id="sub_menu_1" class="menu"> <a class="{action: 'document.title=(\'sub_menu_1.1\')'}">sub_menu_1.1</a> <a data-type="separator"> </a> <a class="{menu:'menu_1'}">sub_menu_1.2</a> <a class="{action: 'document.title=(\'sub_menu_1.3\')', img: 'bgColor.gif'}">sub_menu_1.3</a> <a class="{action: 'document.title=(\'sub_menu_1.4\')',img: 'Applet.gif'}">sub_menu_1.4</a> </div> <div id="sub_menu_2" class="menu"> <a class="{action: 'document.title=(\'sub_menu_2.1\')', img: 'buttonfind.gif'}" >sub_menu_2.1</a> <a class="{action: 'document.title=(\'sub_menu_2.2\')'}">sub_menu_2.2</a> <a data-type="separator"> </a> <a class="{action: 'document.title=(\'sub_menu_2.3\')'}">sub_menu_2.3</a> <a class="{action: 'document.title=(\'sub_menu_2.4\')'}" >sub_menu_2.4</a> </div> <div id="conext_menu_1" class="menu"> <a data-type="text" > <img src="images/browser.png" alt="img" style="position:absolute;margin-top:-20px; margin-left:-25px;margin-bottom:10px"/><br/> <br/>immagini

评论收藏

内容反馈