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