jQuery实现的超酷同级下拉菜单

2009-08-21 09:18:08 作者:Dynamic Drive 来源:查看 | 【大中小】

本菜单效果（Drill Down Menu (v1.6)）可以在同一级下拉列表上打开多级菜单，并配有导航条，非常酷

在网页<head>区添加以下代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="drilldownmenu.css" />

<script type="text/javascript" src="drilldownmenu.js">

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
    
</script>

<script type="text/javascript">

var mymenu=new drilldownmenu({
menuid: 'drillmenu1',
breadcrumbid: 'drillcrumb',
persist: {enable: true, overrideselectedul: true}
})

</script>

在网页<body>区添加以下代码


<div id="drillcrumb"></div>

<div id="drillmenu1" class="drillmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.codingforums.com/">Coding Forums</a></li>
<li><a href="#">Activities</a>
<ul>
<li><a href="#">Activities 1</a></li>
<li><a href="#">Activities 2</a></li>
<li><a href="#">Activities 3</a></li>
<li><a href="#">Water Sports</a>
<ul>
<li><a href="#">Water Sports 1</a></li>
<li><a href="#">Water Sports 2</a></li>
<li><a href="#">Water Rafting</a>
<ul>
<li><a href="#">Water Rafting 1</a></li>
<li><a href="#">Water Rafting 2</a></li>
<li><a href="#">Water Rafting 3</a></li>
<li><a href="#">Water Rafting 4</a></li>
<li><a href="#">Water Rafting 5</a></li>
</ul>
</li>
<li><a href="http://www.sharejs.com">Water Sports 3</a></li>
</ul>
</li>
<li><a href="#">Activities 4</a></li>
<li><a href="#">Activities 5</a></li>
<li><a href="#">Activities 6</a></li>
<li><a href="#">Activities 7</a></li>
<li><a href="#">Activities 8</a></li>
</ul>
</li>
<li><a href="#">Entertainment</a>
<ul>
<li><a href="#">Entertainment 1</a></li>
<li><a href="#">Entertainment 2</a></li>
<li><a href="#">Entertainment 3</a></li>
<li><a href="#">Entertainment 4</a></li>
<li><a href="#">Entertainment 5</a></li>
<li><a href="#">Entertainment 6</a></li>
<li><a href="#">Entertainment 7</a></li>
<li><a href="#">Entertainment 8</a></li>
<li><a href="#">Entertainment 9</a></li>
<li><a href="#">Entertainment 10</a></li>
</ul>
</li>
<li><a href="http://www.sharejs.com">sharejs.com</a></li>
<li><a href="#">Traveling</a>
<ul>
<li><a href="#">Traveling 1</a></li>
<li><a href="#">Traveling 2</a></li>
<li><a href="#">Traveling 3</a></li>
<li><a href="#">North America</a>
<ul>
<li><a href="#">North America 1</a></li>
<li><a href="#">North America 2</a></li>
<li><a href="#">British Comlumbia</a>
<ul>
<li><a href="#">British Comlumbia 1</a></li>
<li><a href="#">British Comlumbia 2</a></li>
<li><a href="#">British Comlumbia 3</a></li>
<li><a href="#">British Comlumbia 4</a></li>
<li><a href="#">British Comlumbia 5</a></li>
</ul>
</li>
<li><a href="#">North America 3</a></li>
<li><a href="#">North America 4</a></li>
<li><a href="#">North America 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.sharejs.com">sharejs.com</a></li>
</ul>
<br style="clear: left" />
</div>

本范例用到了一下脚本和样式文件，点击下载：
drilldownmenu.js
drilldownmenu.css

范例中用到的图片：

下载"jQuery实现的超酷同级下拉菜单"

推荐给朋友

上一篇： javascript计时器的工作原理解析
下一篇：通过getElementById动态改变光标样式

jQuery实现的超酷同级下拉菜单

下载"jQuery实现的超酷同级下拉菜单"

相关资源