首页 > 特效插件 > 导航菜单 >  上下滑动的导航栏特效jQuery代码正文

上下滑动的导航栏特效jQuery代码

特效介绍
jQuery橘黄色导航栏代码

    jQuery橘黄色导航栏代码,鼠标移动上去会,hover效果会随着鼠标上下滑动,效果堪比flash,非常漂亮。
使用方法
1、在head区域引入下面的css文件和js文件:
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="css/5imoban.net.css" type="text/css" media="screen" charset="gbk" />
2、在body区域引入下面的html代码和menu.js:
<div id="sidenav">
    <!-- navigation -->
    <div id="navigation" class="class100 active">
        <div style="top: 124px;" class="depth2_bg" id="depth2_bg"></div>
        <h2 class="depth1Title introduce"><img src="images/h2_lnbtitle1.gif" alt="NE KIDS"></h2>
        <ul class="introduce">
            <li class="brand" navindex="0"><a href="http://www.5imoban.net/" target="_blank"><img src="images/lnb110_off.png" alt=""></a></li>
            <li class="program"  navindex="1"><a href="http://www.5imoban.net/" target="_blank"><img src="images/lnb120_on.png" alt=""></a></li>
            <li class="curriculum"  navindex="2"><a href="http://www.5imoban.net/" target="_blank"><img src="images/lnb130_off.png" alt=""></a></li>
            <li class="study_effect"  navindex="3"><a href="http://www.5imoban.net/" target="_blank"><img src="images/lnb140_off.png" alt=""></a></li>
            <li class="character"  navindex="4"><a href="http://www.5imoban.net/" target="_blank"><img src="images/lnb150_off.png" alt=""></a></li>
            <li class="online_study last"  navindex="5"><a href="http://www.5imoban.net/" target="_blank"><img src="images/lnb160_off.png" alt=""></a></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/menu.js"></script>