jQuery大型下拉菜单插件booNavigation

所属分类:导航-水平导航

 8868  30  查看评论 (3)
jQuery大型下拉菜单插件booNavigation ie兼容9

简要教程

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:鼠标滑过菜单项后多长时间打开下拉菜单。


相关插件-水平导航

导航布局菜单

开发web端比用布局,不用导航,赶紧戳一下
  水平导航
 22249  223

苹果导航菜单-APPLE NAVIGATION WITH CSS3

Apple Navigation with CSS3是一款类似苹果菜单的导航条,很多网站都使用了这种简洁的导航设计。这本是苹果网站的导航条,而现在作者用css3将这种效果实现了注,这不是一款jquery插件,所以不需要引用jquery的库文件。
  水平导航
 18380  13

京东商城导航源码

jquery仿新版京东商城左侧商品分类导航菜单
  水平导航
 25177  104

jQuery滑动导航插件

jQuery滑动导航插件 左右多弹一点
  水平导航
 13529  95

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    奥飞 0
    2016/11/17 15:11:35
    小新的幸福需要蜡笔// 0
    2016/10/28 10:10:56
    花∮饰∮雪 0
    2016/10/27 12:10:59
取消回复