首页 > 特效插件 > 导航菜单 >  底部跟随鼠标滑动的jquery导航代码正文

底部跟随鼠标滑动的jquery导航代码

特效介绍

当鼠标移动到导航栏上面,会从最左侧滑动出一个滑动块,一直滑动到鼠标停留的导航栏处。随着鼠标的移动,滑块会跟着移动。当鼠标移开导航栏,滑块会移动到最左边直到消失。兼容IE6等主流浏览器。
使用方法
1、在文件头部引入nicenav.css、jQuery脚本库以及jquery.nicenav.js文件。
2、讲下面的代码放到您的html文件的导航区域:
<div id="container">
    <ul id="nav">
        <li><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">品牌<span>BRAND</span></a></li>
        <li><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">概况<span>OVERVIEW</span></a></li>
        <li><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">价值<span>WORTH</span></a></li>
        <li><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">配套<span>SUPPORT</span></a></li>
        <li><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">户型<span>UNIT</span></a></li>
        <li><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">精装<span>HARDCOVER</span></a></li>
        <li><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">动态<span>NEWS</span></a></li>
    </ul>
    <div id="buoy"></div>
</div>
<script type="text/javascript">
    $.nicenav(300);
</script>
注:参数设置:
$.nicenav(300); //导航条滑块滑动的速度。默认为300毫秒,即0.3秒。