上下滑动的导航栏特效jQuery代码
- 作者：网页模板
- 大小：0.076MB
- 点击次数：
- 发布时间：2014-06-20 14:47
特效介绍
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>
- 本文标签：
- 导航栏jQuery代码
