导航菜单
简单jQuery大型下拉菜单插件
PetitQ
booNavigation 是一款简单的 jQuery 大型下拉菜单插件。通过该插件可以制作 3 列大型下拉菜单，并带有平滑过渡效果，以及鼠标滑过菜单项时的动画效果。
使用方法:
在页面中引入 jquery 和 booNavigation.js 文件，以及样式文件 booNavigation.css。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="css/booNavigation.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="booNavigation.js" type="text/javascript"></script>
HTML 结构:
使用【nav】元素作为菜单的包裹元素。里面使用无序列表作为菜单的列表项。每一个列表项中可以使用 ul.navContent 来作为大型菜单的列表。
<nav id="booNavigation" class="booNavigation">
<ul>
<li class="navItem">
<a href="#" title="First Item">First Item</a>
<ul class="navContent">
<li>
<ul>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
......</ul>
</li>
......</ul>
</li>
......</ul>
</nav>
初始化插件:
在页面 DOM 元素加载完毕之后，可以通过 booNavigation()方法来初始化该大型菜单插件。
$('#booNavigation').booNavigation({
slideSpeed: 600,
fadeSpeed: 400,
delay: 500
});
配置参数:
该大型菜单的可用配置参数有：
slideSpeed：可用值：200 / 400 / 600 / 'slow' / 'fast'。鼠标滑过菜单项时，菜单项滑动下拉的速度。默认值为 600
fadeSpeed：可用值：200 / 400 / 600 / 'slow' / 'fast'。显示下拉菜单内容 fade 效果的速度。默认为 200
delay：鼠标滑过菜单项后多长时间打开下拉菜单
booNavigation 大型菜单插件的 github 地址为：https://github.com/noemilosada/booNavigation
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
