横向和纵向的下拉菜单第三种实现办法及显示效果

by 清泉 7. 九月 2008 08:21

官方网站:http://www.webtech101.com/Javascript/effect-menu
Multi-level effect menu- 这是一个高度可配置的javascript/css下拉菜单,
可以让你轻松生成多级层联的横向或纵向下拉菜单.

附件里面有关于这个下拉菜单的演示及下拉菜单官方的详细使用说明:webtech101_ml_effect_menu.zip (4.07 kb)

下面是这个下拉菜单的横向和纵向的显示效果图,关于这个下拉菜单的详细显示效果请移步官方查看:

下面是官方的一些使用说明:

As the above shows it is capable of producing multiple menus on a single page.In fact you can have an unlimited number of menus. All produced with the following markup.
<div class="mlmenu [horizontal|vertical] [effect] [arrow|plus] [delay] [trail] [left] [color class] [accessible]"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> </ul> </div>

Then simply place this code in the head of the document.
<link rel="stylesheet" href="css.css">  <script type="text/javascript" src="js.js"> //This script Copyright Brady Mulhollem - WebTech101.com //This notice must stay intact for legal use </script>

Obviously, the menu is very configuarble. The secret is the class portion of the div tag
class="mlmenu [horizontal|vertical] [effect] [arrow|plus] [delay] [trail] [left] [color class] [accessible]"

Lets go over the options.
horizontal or vertical?
The first choice that needs to be made is whether the menu will be horizontal or vertical.Simply place your choice in the class like so class="mlmenu vertical"

color class

The next required part is the color class. The default css comes with two blackwhite and bluewhite. You would use them like this.
class="mlmenu vertical blackwhite"

Tags: css下拉菜单, js下拉菜单, 网页下拉菜单, 下拉菜单