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大型菜单插件。该大型菜单兼容IE8+浏览器,它使用jQuery动画作为过渡效果,并且具有响应式效果,可以无缝和wdpress集成。参考示例:...
megamenu.js是一款非常实用的响应式jQuery大型菜单插件。该大型菜单兼容IE8+浏览器,它使用jQuery动画作为过渡效果,并且具有响应式效果,可以无缝和wordpress集成。
FW制作的JS下拉菜单,支持所有现有浏览器。
JS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.html
JS菜单js menu02.htmlJS菜单js menu02.htmlJS菜单js menu02.htmlJS菜单js menu02.html
JS多级导航菜单
jQuery tuxedo-menu.js实用的侧边栏菜单特效源码.zip
jQuery响应式下拉导航菜单插件megamenu是一款兼容IE8浏览器,它使用jQuery动画作为过渡效果,并且具有响应式效果,可以无缝和wordpress集成。
tuxedo-menu.js是一款实用的jQuery侧边栏菜单插件。它通过animate.css来制作隐藏侧边栏的滑动效果,并且还可以和metisMenu一起结合使用。
Menu.js是一款基于jQuery的轻量级响应式菜单插件,可以根据喜好进行个性化的UI定制
想学习mm_menu.js做网页,一直找不到好的例子,网上有好多说明文件,但总是光说不练,我自己做了个,参考了武汉科技大学首页,效果还可以,希望结合帮助你掌握mm_menu.js的用法! 运行环境:myeclipse jsp项目
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > ...
javascript实现XP效果的菜单,可以实现同时在IE 和Navigator两种不同浏览中浏览,兼容性可靠
Apple style Accordion Menu Glossy Accordion Menu Slashdot Menu
j-accordion.js 是 jQuery 的一个手风琴效果的插件,可自动对 hovered 条目进行扩展,并收缩其他项。可用做菜单用途。
jQuery accordion menu垂直展开收起的导航菜单,同样是扁平化的Bootstrap的风格,这款菜单同样带有动画展开效果,点击右侧的竖向节点线就可展开菜单项,修改菜单为中文内容即可。本菜单可作成问答式客服网页,标题...
js和CSS3炫酷圆形导航菜单插件circular-menu.zip