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

via:http://***/Article/24860

基于jQuery动画二级下拉导航菜单相关推荐

  1. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  2. jQuery二级下拉导航菜单插件适用手机端

    下载地址 一款非常时尚的jQuery和css3二级下拉导航菜单插件.该导航菜单插件中带有二级子菜单,也可以以图文方式展示或图标加文字方式组合展示,非常灵活方便.HTML结构html结构使用一个嵌套的无 ...

  3. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  4. Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码

    本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...

  5. html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果

    本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下 代码如下: 下拉菜单 nav a{ text-de ...

  6. php实现二级下拉菜单,jquery,_用jquery实现二级下拉菜单,jquery - phpStudy

    用jquery实现二级下拉菜单 A B C D E F A B C D E F 这种下拉列表怎么做?当鼠标移动到li>a上,显示对应的div.而且鼠标能移动到div上,二级菜单不消失. 引用文字 ...

  7. 城市地区级联二级下拉选择菜单js特效

    城市地区级联二级下拉选择菜单js特效:城市级联选择,js地区选择.js特效 <script type="text/javascript">var pc = new Ar ...

  8. html京东下拉菜单设置,div css下拉导航菜单(图+演示)

    div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...

  9. html二级下拉导航,html -----二级下拉导航的实现(常用)

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 二级下拉菜单 DEMOS zero dollars wrapping text MENUS spies menu vertical menu LAYOUT ...

  10. jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动

    本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...

最新文章

  1. 刚刚入手一台G11,发短信是老是出现“发送自HTC手机”字样
  2. JSP的改动需要重启应用服务器才能生效?
  3. HDFS 基础部分详解
  4. 因式分解 (10 分)
  5. C#窗体控件随窗体变大而变大
  6. Win-MASM64汇编语言-LEA指令
  7. 启动和停止数据库——停止例程
  8. 博客开园了~~~~~~
  9. mysql 分页拦截器_MyBatis 拦截器 (实现分页功能)
  10. Mac双开微信(2种方法)、Win多开微信
  11. 如何用阿里云服务器搭建个人网站
  12. 最优投资组合--马科维茨投资组合理论
  13. 改变用户在某表空间的配额不足
  14. 今日小程序推荐:文艺青年必备「轻芒杂志」
  15. SCTF-RE200破解笔记
  16. 抽样中误差的相关概念和种类
  17. python培训中心-python培训中心
  18. sled11 sp2 opensuse zypper usage fr net
  19. hiper工具查看页面加载时间
  20. HTML5版uploadify

热门文章

  1. uva 1339 题解
  2. php foreach 不等于_PHP性能优化小技巧
  3. 天池客流预测–GBDT
  4. 最新python中一升级所有已安装的包方法
  5. 计算机网络超详细笔记(一):计网概述
  6. 支持向量机原理及求解 SVM Slater条件 KKT条件 SMO算法 软间隔
  7. Raki的读paper小记:FLAT: Chinese NER Using Flat-Lattice Transformer
  8. Spring、SpringMVC、SpringBoot、SpringCloud的联系与区别(看了多篇后的自我总结)
  9. mysql 1136 column_安装mysql遇到ERROR: 1136 Column count doesn't match value count at row 1
  10. rsync linux 教程,rsync 用法教程