前段时间我一直在向大家推荐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实现一个淡入淡出下拉菜单 非常简易的更多相关文章

  1. 纯CSS3实现淡入淡出下拉菜单

    纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...

  2. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

  3. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  4. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  5. jQuery实现多级手风琴树形下拉菜单(源码)

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  6. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  7. [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

  8. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  9. 简易自定义下拉菜单 与简易默认下拉html片段

    简易自定义下拉选择 html片段 html: <div class="select_box province"> <div class="selecte ...

随机推荐

  1. GitHub支持的Markdown语法 GitHub Flavored Markdown

    GitHub支持的Markdown语法,简称GFM.相比标准的Markdown(SM)语法,有少数几个区别,并添加了新的功能. 本位参考 GitHub Flavored Markdown 撰写.有兴趣 ...

  2. csu1356 :判断一个环是否为奇数环

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1356 题意:给出一个起始点,一些边,有人从这个起始点开始随意走,问在某一个时候,它是否可以处于任意 ...

  3. linux下保护视力、定时强制锁定软件: Workrave

    超负荷地工作会累坏身体的,而且效率也不高,所以工作一段时间就应该休息一下.长时间在电脑前一动不动,很容易患上“重复性劳损”,即 Repetitive Strain Injury (RSI).具体现象大 ...

  4. Android开发(三)——Android布局中实现圆角边框

    设置corners_bg.xml(设置边框圆角可以在drawable-mdpi目录里定义一个xml): <?xml version="1.0" encoding=" ...

  5. 随机颜色-js

    function ramColor() {            return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toSt ...

  6. Android 异步任务——AsyncTask (附使用AsyncTask下载图片Demo)

    我们编程的时候经常需要处理同步任务和异步任务,在Android里面存在一个特性,就是UI线程是不安全的线程.所谓UI线程不安全也就是我们的主线程(进程启动的第一个线程)不能在线程外操作主线程的资源.因 ...

  7. Android 桌面Widget开发要点(时间日期Widget)

    最近需要编写一个日期时间的桌面Widget用来关联日历程序,以前很少写桌面Widget.对这方面技术不是很熟悉,今天花时间重新整理了一下,顺便把编写一个简单时间日期程序过程记录下来. 桌面Widget ...

  8. [转]JAVA泛型通配符T,E,K,V区别,T以及Class<T>,Class<?>的区别

    原文地址:https://www.jianshu.com/p/95f349258afb 1. 先解释下泛型概念 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被 ...

  9. Android开发之获取手机SIM卡信息

    TelephonyManager是一个管理手机通话状态.电话网络信息的服务类.该类提供了大量的getXxx(),方法获取电话网络的相关信息. TelephonyManager类概述: 可用于訪问有关设 ...

  10. Java并发编程:Lock和Synchronized <转>

    在上一篇文章中我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包下提供了另外一种方 ...