基于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">朗文介绍 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：http://www.w2bc.com/Article/24860
基于jQuery动画二级下拉导航菜单的更多相关文章
- 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- jQuery动画二级下拉菜单
在线演示 本地下载
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- Web前端开发实战1：二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
随机推荐
- java学习笔记4--对象的初始化与回收
本文地址:http://www.cnblogs.com/archimedes/p/java-study-note4.html,转载请注明源地址. 1.对象初始化和回收 对象初始化 系统在生成对象时,会 ...
- FrameWork数据权限浅析4之基于多维度配置表实现行级数据安全
日子过得好苦逼,我过的很好,只是缺少￥.时间在变,而问题始终未变,你解不解决它都在那里一动不动.不知不觉已经发现手机的中央,电脑的右下角已经出现了201411的字样,突然从桌子上爬起来,差点忘记了自己 ...
- Linux中基于hadoop安装hive(CentOS7+hadoop2.8.0+hive2.1.1)
http://blog.csdn.net/pucao_cug/article/details/71773665
- SpringMVC基于代码的配置方式（零配置，无web.xml）直接继承WebMvcConfigurerAdapter
基于配置文件的web项目维护起来可能会更方便,但是有时候我们会有一些特殊的需求,比如防止客户胡乱更改配置,这时候我们需要给配置隐藏到代码中. 1.创建一个动态web项目(无需web.xml) 2.右键 ...
- CentOS6网卡静态IP设置
CentOS网卡配置源文件如下:DEVICE=eth0HWADDR=00:0C:29:A8:67:46TYPE=EthernetUUID=4103d7a8-d073-4e93-ac68-e6f8496 ...
- gsoap
C++中如何使用gsoap开发WebService 1. 什么是gSOAPgSOAP是一个夸平台的,用于开发Web Service服务端和客户端的工具,在Windows.Linux.MAC OS和UN ...
- NCBI SRA数据预处理
SRA数据的的处理流程大概如下 一.SRA数据下载. NCBI 上存储的数据现在大都存储为SRA格式. 下载以后就是以SRA为后缀名. 这里可以通过三种方式下载SRA格式的数据. 1.通过http方式 ...
- tftp的安装、设置以及put、get传输实验
tftp安装流程如下: (1)首先挂载Linux系统镜像文件到/media/cdrom/的(cdrom为在/media/下自己创建的目录) (2)进入/media/cdrom/Server/可以找到t ...
- 解决Android SDK Manager下载问题和android studio每次启动都要在fetching Android sdk compoment information
1.能解决国内访问Google服务器的困难启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - ...
- ubuntu——更新、编译、启动内核
步骤如下: 1.make mrproper Linux下面去编译项目之前,一般常会用make mrproper去先删除之前编译所生成的文件和配置文件,备份文件等,其中,mrproper和distcle ...