特效介绍
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>