春节回来给大家分享一款基于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前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
随机推荐
-
[Android] Shape背景制作半圆或半边框
实现原理使用layer-list对shape进行叠加显示. 直接上代码: <layer-list xmlns:android="http://schemas.android.com/a ...
-
Session中load/get方法的详细区别
Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象.其区别在于: 如果未能发现符合条件的记录,get方法返回null,而load方法会抛出一个O ...
-
转移博客到xinqiyang.freeflare.com了,这里会继续更新.
hi.... 欢迎大家来到这里,这里将转移到github page搭建的博客 http://xinqiyang.freeflare.com 了,现在习惯于实用markdown来写东西了,这样可以脱离浏 ...
-
转：HIBERNATE一些_方法_@注解_代码示例---写的非常好
HIBERNATE一些_方法_@注解_代码示例操作数据库7步骤 : 1 创建一个SessionFactory对象 2 创建Session对象 3 开启事务Transaction : hibernate ...
- python中统计列表各个元素的个数
-
dede导航设置成单页面内容
有时*导航可能就是一个单页面 如公司简介 联系我们等 方法一:直接在导航栏填写内容 常规设置 二高级选项设置模板 三 填写页面内容 四 模板页面调用 内容 可在栏目模板中用{dede:field.c ...
-
[docker]docker的四种网络方式
声明: 本博客欢迎转发,但请保留原作者信息! 博客地址:http://blog.csdn.net/halcyonbaby 内容系本人学习.研究和总结,如有雷同,实属荣幸! bridge方式(默认) H ...
-
JavaScript数组对象方法
数组的方法:首先,数组的方法有数组原型方法,也有从object对象继承来的方法.这里只详细说明一下数组的原型方法. (1)join:把数组中的所有元素放入一个字符串.元素通过指定的分隔符进行分隔. 例 ...
-
C#判断远程计算机的指定端口是否打开的代码
如下的内容段是关于C#判断远程计算机的指定端口是否打开的内容,应该能对小伙伴有一些用. using System.Net;if(!string.IsNullOrEmpty(txtPort.Text)) ...
-
git上传到github时犯的错误
以下是git的正确顺序 git config --global user.name "xxx" 全局注册名字 git config --global user.email &quo ...