上下滑动的导航栏特效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>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！