基于jQuery动画二级下拉导航菜单
2015-03-02 09:55
811 查看
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单。鼠标经过的时候以动画的形式出现二级导航。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
via:/article/1211292.html
在线预览 源码下载
实现的代码。
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">朗文介绍 Profile</a> </li> <li><a href="http://www.w2bc.com">教育理念 Concept</a> </li> <li><a href="http://www.w2bc.com">企业文化 Culture</a> </li> <li><a href="http://www.w2bc.com">教学环境 Environment</a> </li> <li><a href="http://www.w2bc.com">联系我们 Contact</a> </li> <li><a href="http://www.w2bc.com">合作伙伴 Partners</a> </li> <li><a href="http://www.w2bc.com">招贤纳士 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">名校计划&优才课程</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">专家团队 Experts</a> </li> <li><a href="http://www.w2bc.com">中教 Tutor</a> </li> <li><a href="http://www.w2bc.com">外教 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">我们的会员 Our members</a> </li> <li><a href="http://www.w2bc.com">会员中心 Login</a> </li> <li><a href="http://www.w2bc.com">会员公告 Notice</a> </li> <li><a href="http://www.w2bc.com">海外游学 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">最新新闻 News</a> </li> <li><a href="http://www.w2bc.com">精彩活动 Activity</a> </li> <li><a href="http://www.w2bc.com">欢乐相册 Album</a> </li> <li><a href="http://www.w2bc.com">视频中心 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:/article/1211292.html
相关文章推荐
- 基于jQuery动画二级下拉导航菜单
- jQuery实现淡入淡出二级下拉导航菜单的方法
- 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
- 一款jquery编写图文下拉二级导航菜单特效
- jQuery实现带动画效果的二级下拉导航方法
- jQuery实现带动画效果的二级下拉导航方法
- Jquery实现带动画效果的经典二级导航菜单
- 基于JS快速实现导航下拉菜单动画效果附源码下载
- 一款基于jquery和css3的响应式二级导航菜单
- jQuery实现二级下拉导航菜单(织梦DedeCMSv5.7版)
- jquery 竖向二级下拉导航菜单
- 基于jquery实现百度新闻导航菜单滑动动画
- 一款基于jquery和css3的响应式二级导航菜单
- 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
- jquery二级导航菜单--可弹出下拉层 UL/LI结构
- Jquery实现带动画效果的经典二级导航菜单
- jQuery实现淡入淡出二级下拉导航菜单的方法
- 一款基于jquery和css3的响应式二级导航菜单
- 实列教程 一款基于jquery和css3的响应式二级导航菜单