基于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://***">首页<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://***">朗文介绍 Profile</a> </li><li><a href="http://***">教育理念 Concept</a> </li><li><a href="http://***">企业文化 Culture</a> </li><li><a href="http://***">教学环境 Environment</a> </li><li><a href="http://***">联系我们 Contact</a> </li><li><a href="http://***">合作伙伴 Partners</a> </li><li><a href="http://***">招贤纳士 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://***">名校计划&优才课程</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://***">专家团队 Experts</a> </li><li><a href="http://***">中教 Tutor</a> </li><li><a href="http://***">外教 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://***">我们的会员 Our members</a> </li><li><a href="http://***">会员中心 Login</a> </li><li><a href="http://***">会员公告 Notice</a> </li><li><a href="http://***">海外游学 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://***">最新新闻 News</a> </li><li><a href="http://***">精彩活动 Activity</a> </li><li><a href="http://***">欢乐相册 Album</a> </li><li><a href="http://***">视频中心 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动画二级下拉导航菜单相关推荐
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- jQuery二级下拉导航菜单插件适用手机端
下载地址 一款非常时尚的jQuery和css3二级下拉导航菜单插件.该导航菜单插件中带有二级子菜单,也可以以图文方式展示或图标加文字方式组合展示,非常灵活方便.HTML结构html结构使用一个嵌套的无 ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
- html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下 代码如下: 下拉菜单 nav a{ text-de ...
- php实现二级下拉菜单,jquery,_用jquery实现二级下拉菜单,jquery - phpStudy
用jquery实现二级下拉菜单 A B C D E F A B C D E F 这种下拉列表怎么做?当鼠标移动到li>a上,显示对应的div.而且鼠标能移动到div上,二级菜单不消失. 引用文字 ...
- 城市地区级联二级下拉选择菜单js特效
城市地区级联二级下拉选择菜单js特效:城市级联选择,js地区选择.js特效 <script type="text/javascript">var pc = new Ar ...
- html京东下拉菜单设置,div css下拉导航菜单(图+演示)
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
- html二级下拉导航,html -----二级下拉导航的实现(常用)
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 二级下拉菜单 DEMOS zero dollars wrapping text MENUS spies menu vertical menu LAYOUT ...
- jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...
最新文章
- 刚刚入手一台G11,发短信是老是出现“发送自HTC手机”字样
- JSP的改动需要重启应用服务器才能生效?
- HDFS 基础部分详解
- 因式分解 (10 分)
- C#窗体控件随窗体变大而变大
- Win-MASM64汇编语言-LEA指令
- 启动和停止数据库——停止例程
- 博客开园了~~~~~~
- mysql 分页拦截器_MyBatis 拦截器 (实现分页功能)
- Mac双开微信(2种方法)、Win多开微信
- 如何用阿里云服务器搭建个人网站
- 最优投资组合--马科维茨投资组合理论
- 改变用户在某表空间的配额不足
- 今日小程序推荐:文艺青年必备「轻芒杂志」
- SCTF-RE200破解笔记
- 抽样中误差的相关概念和种类
- python培训中心-python培训中心
- sled11 sp2 opensuse zypper usage fr net
- hiper工具查看页面加载时间
- HTML5版uploadify
热门文章
- uva 1339 题解
- php foreach 不等于_PHP性能优化小技巧
- 天池客流预测–GBDT
- 最新python中一升级所有已安装的包方法
- 计算机网络超详细笔记(一):计网概述
- 支持向量机原理及求解 SVM Slater条件 KKT条件 SMO算法 软间隔
- Raki的读paper小记:FLAT: Chinese NER Using Flat-Lattice Transformer
- Spring、SpringMVC、SpringBoot、SpringCloud的联系与区别(看了多篇后的自我总结)
- mysql 1136 column_安装mysql遇到ERROR: 1136 Column count doesn't match value count at row 1
- rsync linux 教程,rsync 用法教程