jQuery实现一个淡入淡出下拉菜单 非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件。今天先分享一款利用jQuery实现的淡入淡出下拉菜单,看上去非常简单。先看看效果图。
虽然简单,但看上去还是蛮不错的,不是吗?
我们也可以从这里看到完整的DEMO演示。
接下来我们来简单看看这款下拉菜单源代码,先从HTML代码开始:
<ul class="navigation">
<li><a href="#">Main Cat 1</a></li>
<li><a href="#">Main Cat 2 </a>
<ul>
<li><a href="#">Sub Cat 2-1</a></li>
<li><a href="#">Sub Cat 2-2</a></li>
<li><a href="#">Sub Cat 2-3</a></li>
<li><a href="#">Sub Cat 2-4</a></li>
<li><a href="#">Sub Cat 2-5</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Main Cat 3 </a>
<ul>
<li><a href="#">Sub Cat 3-1</a></li>
<li><a href="#">Sub Cat 3-2</a></li>
<li><a href="#">Sub Cat 3-3</a></li>
<li><a href="#">Sub Cat 3-4</a></li>
<li><a href="#">Sub Cat 3-5</a></li>
<li><a href="#">Sub Cat 3-6</a></li>
<li><a href="#">Sub Cat 3-7</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Main Cat </a></li>
</ul>
然后是CSS代码:
/* Giving a font-family and Size to give good look */
body{
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
} /* Adjusting the margins, paddings and no list styles */
.navigation {
margin:;
padding:;
list-style:none;
} /* Little tricking with positions */
.navigation li {
float:left; /* Show list items inline */
width:150px;
position:relative;
} /* Playing with Main Categories */
.navigation li a {
background:#262626;
color:#fff;
display:block; /* Making sure a element covers whole li area */
padding:8px 7px 8px 7px;
text-decoration:none; /* No underline */
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
} .navigation li a:hover {
color:#F2861D;
} /* Sub Cat Menu stuff*/
.navigation ul {
position:absolute;
left:;
display:none; /* Hide it by default */
margin:0 0 0 -1px;
padding:;
list-style:none;
border-bottom:3px solid #F2861D;
} .navigation ul li {
width:150px;
float:left;
border-top:none;
} /* Sub Cat menu link properties */
.navigation ul a {
display:block; /* Making sure a element covers whole li area */
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
} .navigation ul a:hover {
color:#F2861D;
}
接下来是重要的jQuery代码,主要是实现下拉时淡入淡出的效果:
$(document).ready(function () {
// hover property will help us set the events for mouse enter and mouse leave
$('.navigation li').hover(
// When mouse enters the .navigation element
function () {
//Fade in the navigation submenu
$('ul', this).fadeIn(); // fadeIn will show the sub cat menu
},
// When mouse leaves the .navigation element
function () {
//Fade out the navigation submenu
$('ul', this).fadeOut(); // fadeOut will hide the sub cat menu
}
);
});
这里用了jQuery的fadeIn()和fadeOut()方法,熟悉jQuery的同学一定不会对它们陌生。
另外,大家可以在这里看到更多漂亮的CSS3菜单,兼容性问题大家自己取舍吧,呵呵。
最后把这款菜单的源码代码分享一下,下载地址>>
jQuery实现一个淡入淡出下拉菜单 非常简易的更多相关文章
- 纯CSS3实现淡入淡出下拉菜单
纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...
- 用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素. 3通过使用show()方法来显示HTML元素. 4通过 ...
- jQuery插件:模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
- jQuery实现多级手风琴树形下拉菜单(源码)
前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...
- JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
- [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示
今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...
- jQuery 实现无限任意添加下拉菜单
新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...
- 简易自定义下拉菜单 与简易默认下拉html片段
简易自定义下拉选择 html片段 html: <div class="select_box province"> <div class="selecte ...
随机推荐
- Android下基于PCM的音频渲染
环境准备 请按照我之前的文章-Android下基于SDL的位图渲染,安装必要的开发环境. 实践篇 这里主要参考Beginning SDL 2.0(6) 音频渲染及wav播放,只不过将源从WAV文件改成 ...
- VMware vCenter 资源池
VMware vCenter 资源池 1.简介 资源池是灵活管理资源的逻辑抽象.资源池可以分组为层次结构,用于对可用的 CPU 和内存资源按层次结构进行分区. 每台独立主机和每个DRS 群集都具有一个 ...
- linux清理Java环境
1.清理Java环境rm -f /usr/bin/javarm -f /etc/alternatives/java rm -f /usr/bin/javacrm -f /etc/alternative ...
- C#学习笔记(19)——使用IComparer(百度文库)
说明(2017-7-24 19:15:15): 1. 百度文库里的一篇文章,觉得讲的比较好.原文地址:https://wenku.baidu.com/view/b53cd250ad02de80d4d8 ...
- JavaScript高级 面向对象(13)--构造函数的执行过程
说明(2017-4-2 21:50:45) 一.构造函数是干什么用的: 1. 初始化数据的. 2. 在js给对象添加属性用的,初始化属性值用. 二.创建对象的过程: 1. 代码:var p = new ...
- 2. 集成学习(Ensemble Learning)Bagging
1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...
- Cpu表现出正弦曲线
#include <windows.h> #include <math.h> int main(void) { SetThreadAffinityMask(GetCurrent ...
- kali Rolling 安装QQ和虚拟机
环境: kali Rolling 64位 WPS 官网linux版下载链接:http://community.wps.cn/download/ 使用dpkg命令安装,遇到依赖问题,用apt-get ...
- 【微信小程序】tabBar的显示问题
tabBar不显示 在app.json中配置了4个页面,在tabBar的list中随意写了两个页面,编译后发现不能显示tabBar. { "pages": [ "page ...
- Badboy+Jmeter进行性能测试
摸索了两天,终于搞定! 目的:使用Badboy和Jmeter添加5000个系统用户 一开始用Badboy进行批量添加,想先在excel中准备好5000个用户名,再导入到Badboy中.但是一直不成功, ...