基于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前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
随机推荐
- JSP学习笔记（五）：日期处理、页面重定向、点击量统计、自动刷新和发送邮件
一.JSP 日期处理: 使用JSP最重要的优势之一,就是可以使用所有Java API.本节讲述Java中的Date类,它在java.util包下,封装了当前日期和时间. Date类有两个构造函数.第 ...
- 解决 org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type的问题
具体错误如下: Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying be ...
- AjaxPro因为汉字文件夹引发的IE兼容性问题
公司一老项目.须要使用AjaxPro.引用dll,config配置,pageload注冊一直都没有问题. google浏览器測试成功. 奇怪的是在IE中英勇的爆掉了... .. 报错: eval(&q ...
- (C++)虚函数表解析（转）
(文章出处不详,转自:http://blog.csdn.net/hairetz/article/details/4137000) C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用 ...
- JDK中注解的底层实现
前提 用Java快三年了,注解算是一个常用的类型,特别是在一些框架里面会大量使用注解做组件标识.配置或者策略.但是一直没有深入去探究JDK中的注解到底是什么,底层是怎么实现了?于是参考了一些资料,做了 ...
- GridLayout with span
Widgets can span multiple columns or rows in a grid. In the next example we illustrate this. #!/usr/ ...
- js Object.is 相等判断
Object.is使用“Same-value equality”(同值相等)算法进行相等判断.它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致. Object.is('foo', ...
- centos7 yum安装遇到报错：Head V3 RSA/SHA256 Signature, key ID 352c64e5: NOKEYer
centos7 yum安装时遇到错误:Header V3 RSA/SHA256 Signature, key ID 352c64e5: NOKEY 无法安装时,可按如下方法解决: This mini ...
- MIME protocol 说明
按照 <张孝祥Java邮件开发详解> 自己create了 emali, 其中jpg 和wav文件格式过大,删除了写内容 From redhat@diego.com Mon Nov 17 0 ...
- 串口通讯编程一日通3（COMMTIMEOUTS DCB整理）
上一篇看了Overlapped IO模型后,接下来看剩下两个重要结构: 2.COMMTIMEOUTS结构 超时设置 COMMTIMEOUTS:COMMTIMEOUTS主要用于串口超时参数设置.COM ...