春节回来给大家分享一款基于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

基于jQuery动画二级下拉导航菜单的更多相关文章

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

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

  2. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

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

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

  4. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  5. jQuery动画二级下拉菜单

    在线演示 本地下载

  6. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  7. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  8. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  9. Web前端开发实战1:二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

随机推荐

  1. 让Netty入门变得简单

    让Netty入门变得简单 https://mp.weixin.qq.com/s/MBnbLmCmFJo0QK9WNwXrXQ 如果先启动nettyClient就不会有nettyServer输出了: p ...

  2. Voice Commands (VCD) Cortana 微软小娜示例

    Cortana 样品 您可以创建自定义功能Cortana使用Cortana技能装备或遗留的声音命令(VCD)平台. 在这里,你可以找到相关的样品: Cortana技能装备 目前Cortana技巧是建立 ...

  3. Android + Eclipse + PhoneGap 3.4 安卓最新环境配置,部分资料整合网上资料,已成功安装.

    前言:广州花都论坛,打算推出本地服务o2o应用.快速开发手机应用,phonegap 我的小站,http://www.w30.cn/ 如果有什么问题也可以到小组留言,可以的话,贡献一个ip:) phon ...

  4. NGUI Tutorial 4 ScrollView

    一.createScrollView 1.First, select the panel you want to be your scroll view and right-click anywher ...

  5. 阿里云服务器 centos7 ftp安装

    昨天租了阿里云服务器一个月,想玩一下linux系统,结果想用ftp上传本地文件的时候,发现用不了,结果在安装配置的时候折腾了几个小时,在网上查了无数的资料,有的说要改配置文件,有的说要关防火墙,说啥的 ...

  6. 【Oracle】新建用户,删除用户,授权

    一.创建用户 oracle内部有两个建好的用户:system和sys.用户可直接登录到system用户以创建其他用户,因为system具有创建别 的用户的 权限. 在安装oracle时,用户或系统管理 ...

  7. 开源爬虫Labin,Nutch,Neritrix介绍和对比

    crawler 开发 语言 功能 单一 支持分布式 爬取 效率 镜像 保存 Nutch Java × √ 低 × Larbin C++ √ × 高 √ Heritrix Java √ × 中 √ ** ...

  8. ubuntu 14.04为/检查磁盘时发生严重错误的解决方法

    http://jingyan.baidu.com/article/0aa22375bbffbe88cc0d6419.html

  9. C# XMLOperate

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...

  10. VC版DoEvents

    VB和C#下有一个DoEvents方法,可以让程序在执行操作的同时仍可以处理其他事件.由于近期在做一个数据格式转换的项目,需要进行大批量的数据处理,希望能在进行数据读写过程中,程序还能接收其他操作,防 ...