详细内容

jQuery实现的超酷同级下拉菜单
更新时间：2009-8-21

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

查看全部代码：查看

代码使用方法：

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

在网页<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

范例中用到的图片：

下载：从本地下载

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

本类最新资源

本类最新

本类热门资源

本类热门