Menu.js is a free, small JavaScript (drop-down) menu for developers. It's unobtrusive and only requires a HTML unordered list and your own CSS styles.
下載:http://www.menujs.net/downloads/Menu.js-1.3.1.zip
例子:
Example.html
01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849 <html> <head> <script type="text/javascript" src="script/Menu.js"> </script> <script type="text/javascript"> //用法:Menu.init('ID',{'option'}) Menu.init("menu", {"orientation": Menu.HORIZONTAL, "hidePause": 0.5,"opacity":0.5}); /* Option有4個 orientation (int; one of: Menu.HORIZONTAL, Menu.VERTICAL) HORIZONTAL-水平顯示下拉菜单/VERTICAL-垂直顯示下拉菜單 showPause (float; in seconds; default: 0.0) 按下選項後的延迟時間,預設為0秒 hidePause (float; in seconds; default: 1.0 ) 離開選項後的延迟時間,預設為1秒 opacity (float; 0 = transparent, 1 = opaque; default: 1) 透明度,預設為1,即不透明 */ </script> <link rel="stylesheet" type="text/css" href="css/Style-HORIZONTAL.css" /> </head> <body> <ul id="menu"> <li><a href="/index.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/technology.html">Technologies</a> <ul> <li><a href="/markup.html">Markup</a> <ul> <li><a href="/markup_html.html">HTML</a></li> <li><a href="/markup_xhtml.html">XHTML</a></li> <li><a href="/markup_xml.html">XML</a></li> </ul> </li> <li><a href="/css.html">CSS</a></li> <li><a href="/javascript.html">JavaScript</a></li> <li><a href="/prototype.html">Prototype JS</a></li> </ul> </li> <li><a href="/contact.html">Contact</a></li> </ul> </body> </html>
Style-HORIZONTAL.css
#menu,
#menu ul { margin: 0; padding: 0; }
010203040506070809101112131415161718 #menu li { list-style-type: none; } /* 第一層次 */#menu li, #menu a { float: left; width: 100px; } #menu a { display: block; background: #EEE; } #menu a:hover, #menu a.menu_open { background: #DDD; } /* 第二層次 */#menu ul { visibility: hidden; position: absolute; width: 100px; } #menu ul a { background: #DDD; } #menu ul a:hover, #menu ul a.menu_open { background: #CCC; } /* 第三層次(顏色) */#menu ul ul a { background: #CCC; } #menu ul ul a:hover { background: #BBB; }
Style-VERTICAL.CSS
010203040506070809101112131415161718192021 #menu, #menu ul { margin: 0; padding: 0; } #menu li { list-style-type: none; } /* 第一層*/#menu { width: 100px; } #menu li, #menu a { float: left; width: 100px; } #menu a { display: block; background: #EEE; } #menu a:hover, #menu a.menu_open { background: #DDD; } /* 第二層 */#menu ul { visibility: hidden; position: absolute; width: 100px; } #menu ul a { background: #DDD; } #menu ul a:hover, #menu ul a.menu_open { background: #CCC; } /* 第三層(顏色) */#menu ul ul a { background: #CCC; } #menu ul ul a:hover { background: #BBB; }
分享到：
相关推荐
jsmind.menu.js（jsmind的右键菜单）
menu.jsmenu.jsmenu.jsmenu.jsmenu.jsmenu.jsmenu.js
总的来说，megamenu.js是一个强大且灵活的jQuery插件，能够帮助开发者轻松创建响应式的大型菜单，提升网站的导航体验。无论你是网页设计师还是前端开发者，熟悉并掌握megamenu.js的使用，都将对你的工作带来极大的...
在这个场景中，我们关注的是一个名为"js_menu.rar_MENU._javascript_js_menu-collapsed.js_menu_front."的压缩包，它涉及到一个JavaScript实现的多级导航菜单。这个菜单可能是一个网页应用的核心组成部分，因为它...
总的来说，`SelectMenu.js` 是一个强大的 jQuery 下拉菜单插件，它以其简洁、易用和多样化的特性，为网页开发带来了更优的用户体验。无论是在简单的网页还是复杂的 Web 应用中，它都能很好地适应并发挥其作用。
tuxedo-menu.js则是基于jQuery的一个插件，专为构建侧边栏菜单而设计。这个插件的核心特点是其丰富的自定义选项和流畅的过渡效果，使得菜单不仅具有实用性，还带有视觉吸引力。 在使用tuxedo-menu.js之前，首先需要...
插件描述：megamenu.js是一款非常实用的响应式jQuery大型菜单插件。该大型菜单兼容IE8+浏览器，它使用jQuery动画作为过渡效果，并且具有响应式效果，可以无缝和wdpress集成。参考示例：...
tuxedo-menu.js就是这样一个专门针对侧边栏菜单设计的jQuery插件，它提供了美观且高效的解决方案，帮助开发者轻松创建具有动画效果的隐藏侧边栏。 **核心特性** 1. **滑动效果**：tuxedo-menu.js利用animate.css库...
这段代码会在页面加载完成后，对ID为`myMenu`的`<nav>`元素应用Menu.js插件，创建一个响应式的菜单。 Menu.js允许开发者通过配置选项来自定义菜单行为和外观。例如，可以设置动画速度、菜单展开方式、子菜单的触发...
FW制作的JS下拉菜单，支持所有现有浏览器。
它允许在主菜单项下显示多个子菜单，形成一个多层级的导航结构。这种结构既节省了页面空间，又提供了丰富的信息层次。通过jQuery动画效果，这些下拉菜单在用户鼠标悬停时平滑地展开和收起，增强了用户的交互体验。 ...
JS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.html
megamenu.js是一个功能强大且灵活的响应式jQuery大型菜单插件，它不仅支持旧版浏览器，还具备与WordPress的完美集成。通过使用jQuery动画技术，它提供了流畅的用户体验，而其高度的可定制性和扩展性使得开发者可以...
标题中的"XP-menu.rar"指的是一个使用JavaScript实现的XP风格的菜单系统，它旨在为网页添加类似微软Windows XP操作系统中的下拉菜单效果。这个菜单系统不仅具有吸引人的视觉外观，而且设计时考虑了浏览器的兼容性，...
"menu.rar"可能是一个包含资源的压缩包，用于设计、开发或优化一个应用程序或网站的菜单系统。下面将深入探讨菜单设计的相关知识点。 【描述】: "menu.rar menu.rar menu.rar menu.rar" 描述中的重复提到"menu.rar...
JS菜单js menu02.htmlJS菜单js menu02.htmlJS菜单js menu02.htmlJS菜单js menu02.html
总结来说，"js动态菜单合集(left menu)"是一个关于如何使用JavaScript和jQuery创建高效、美观的左侧导航菜单的学习资源。这其中包括Apple风格的Accordion Menu，注重简洁与易用；Glossy Accordion Menu，强调视觉...
Menu.js 是一个专为HTML5设计的菜单创建库，它利用JavaScript的强大功能来提供灵活、可定制的菜单解决方案。在现代Web开发中，用户界面的交互性和易用性至关重要，而菜单作为网站导航的核心元素，其设计与实现直接...