基于jQuery动画二级下拉导航菜单

时间:2022-12-16 16:30:50

春节回来给大家分享一款基于jQuery动画二级下拉导航菜单。鼠标经过的时候以动画的形式出现二级导航。效果图如下:

基于jQuery动画二级下拉导航菜单

在线预览   源码下载

实现的代码。

html代码:

 <div id="nav_main">
<div class="inner1">
<div class="inner2">
<div id="nav_main_bar">
<ul>
<li class="current">
<div class="bm">
<div class="inner">
<div class="inner3">
<div class="inner4">
<a href="http://www.w2bc.com">首页<br>
Home</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="bm">
<div class="inner">
<div class="inner3">
<div class="inner4">
<a href="http://www.w2bc.com">关于我们<br>
About Us</a></div>
</div>
</div>
</div>
<div class="lm">
<div class="inner5">
<div class="inner6">
<ul>
<li><a href="http://www.w2bc.com">朗文介绍&nbsp;Profile</a> </li>
<li><a href="http://www.w2bc.com">教育理念&nbsp;Concept</a> </li>
<li><a href="http://www.w2bc.com">企业文化&nbsp;Culture</a> </li>
<li><a href="http://www.w2bc.com">教学环境&nbsp;Environment</a> </li>
<li><a href="http://www.w2bc.com">联系我们&nbsp;Contact</a> </li>
<li><a href="http://www.w2bc.com">合作伙伴&nbsp;Partners</a> </li>
<li><a href="http://www.w2bc.com">招贤纳士&nbsp;Jobs</a> </li>
<li class="clear"></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="bm">
<div class="inner">
<div class="inner3">
<div class="inner4">
<a href="http://www.w2bc.com">课程体系<br>
Courses</a></div>
</div>
</div>
</div>
<div class="lm">
<div class="inner5">
<div class="inner6">
<ul>
<li><a href="http://www.w2bc.com">POCKETS™ 课程</a> </li>
<li><a href="http://www.w2bc.com">BACKPACK™ 课程</a> </li>
<li><a href="http://www.w2bc.com">SUITCASE™ 课程</a> </li>
<li><a href="http://www.w2bc.com">名校计划&amp;优才课程</a> </li>
<li><a href="http://www.w2bc.com">Phonics(自然拼读)课程</a> </li>
<li><a href="http://www.w2bc.com">PTE少儿英语考试</a> </li>
<li><a href="http://www.w2bc.com">朗文原版教材</a> </li>
<li class="clear"></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="bm">
<div class="inner">
<div class="inner3">
<div class="inner4">
<a href="http://www.w2bc.com">师资力量<br>
Teachers</a></div>
</div>
</div>
</div>
<div class="lm">
<div class="inner5">
<div class="inner6">
<ul>
<li><a href="http://www.w2bc.com">专家团队&nbsp;Experts</a> </li>
<li><a href="http://www.w2bc.com">中教&nbsp;Tutor</a> </li>
<li><a href="http://www.w2bc.com">外教&nbsp;Foreign Teacher</a> </li>
<li class="clear"></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="bm">
<div class="inner">
<div class="inner3">
<div class="inner4">
<a href="http://www.w2bc.com">我们的会员<br>
Members</a></div>
</div>
</div>
</div>
<div class="lm">
<div class="inner5">
<div class="inner6">
<ul>
<li><a href="http://www.w2bc.com">我们的会员&nbsp;Our members</a> </li>
<li><a href="http://www.w2bc.com">会员中心&nbsp;Login</a> </li>
<li><a href="http://www.w2bc.com">会员公告&nbsp;Notice</a> </li>
<li><a href="http://www.w2bc.com">海外游学&nbsp;Study Tour</a> </li>
<li class="clear"></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="bm">
<div class="inner">
<div class="inner3">
<div class="inner4">
<a href="http://www.w2bc.com">新闻中心<br>
News</a></div>
</div>
</div>
</div>
<div class="lm">
<div class="inner5">
<div class="inner6">
<ul>
<li><a href="http://www.w2bc.com">最新新闻&nbsp;News</a> </li>
<li><a href="http://www.w2bc.com">精彩活动&nbsp;Activity</a> </li>
<li><a href="http://www.w2bc.com">欢乐相册&nbsp;Album</a> </li>
<li><a href="http://www.w2bc.com">视频中心&nbsp;Video</a> </li>
<li class="clear"></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="bm">
<div class="inner">
<div class="inner3">
<div class="inner4">
<a href="http://www.w2bc.com">陈慧珊专栏<br>
Blog</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="bm">
<div class="inner">
<div class="inner3">
<div class="inner4">
<a href="http://www.w2bc.com">家长秘籍<br>
Cheats</a></div>
</div>
</div>
</div>
<div class="lm">
<div class="inner5">
<div class="inner6">
<ul>
<li><a href="http://www.w2bc.com">站长素材</a> </li>
<li><a href="http://www.w2bc.com">免费素材</a> </li>
<li><a href="http://www.w2bc.com">素材中国</a> </li>
<li><a href="http://www.w2bc.com">站长素材</a> </li>
<li class="clear"></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

via:http://www.w2bc.com/Article/24860