邪罗刹的菠萝阁

> 呵呵 O(∩_∩)O，小邪最近在玩鼠标事件来着，所以介绍一些不同的 CSS 和 jQuery 下拉菜单。
> 话说 jQuery 的效果真的很酷，很让人喜欢。期待 CSS 的动画模块早日被主流浏览器支持。

> 平滑移动是很舒服的效果，但移动需要时间，若需要频繁使用下拉菜单，也许不是最好的选择。
> P.s. 最近想做的事情好多喔，想学 PHP、AJAX，还想学 jQuery。杯具的是时间不够 ╮(╯▽╰)╭。

1. CSS Visibility 属性：

> 这个属性在下面的普通 CSS 下拉菜单里有用到，所以先了解一下。

2. 普通的 CSS 下拉菜单：

> 一般的 CSS 下拉菜单是灰常简单的，只是用了 Hover 伪类而已。
> 此伪类的作用是，当鼠标悬浮在元素上方时，向元素添加样式，移开就移除样式。
> 呵呵，代码我就不贴了，需要的都在这个页面里面，查看源代码就好。
> 话说，这个纯 CSS 下拉菜单就不要使用 IE6 浏览器了，不然会很杯具的。

> Demo 传送门 - Http://tool.evlos.org/demo/css_simple_menu

3. 普通的 JS 下拉菜单：

> 呵呵，其实这里只是比上面多了下面的一行 CSS 和 JavaScript 代码。让 IE6 不那么杯具而已。

#menu li.jshover ul { left:auto; }

<script type=text/javascript>
<!--
function menuFix() {
    var sfEls = document.getElementById("menu").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
        this.className+=(this.className.length>0? " ": "") + "jshover";
        }
        sfEls[i].onMouseDown=function() {
        this.className+=(this.className.length>0? " ": "") + "jshover";
        }
        sfEls[i].onMouseUp=function() {
        this.className+=(this.className.length>0? " ": "") + "jshover";
        }
        sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)jshover\\b"),
"");
        }
    }
}
window.onload=menuFix;
//-->
</script>

> Demo 传送门 - Http://tool.evlos.org/demo/js_simple_menu

4. jQuery 淡入淡出下拉菜单：

> 注意！！jQuery 的动画效果中效果名称的大小写灰常重要，错误则会导致效果无效。
> 注意！！如果出现非 IE8 浏览器出现不居中的位移，请加入这个属性 -Webkit-padding-start:0px。
> 好吧，这次在 IE6 里面虽然没有那么杯具，但是淡入淡出效果还是蛮杯具的。

<script type="text/javascript">
	$(document).ready(function() {
		$('#menu ul').addClass('children');
		var f1 = function() {
			$(this).children('ul').fadeIn();
		};
		var f2 = function() {
			$(this).children('ul').fadeOut();
		};
		$('#menu li').hover(f1, f2);
	});
</script>

> Demo 传送门 - Http://tool.evlos.org/demo/jquery_fade_menu

5. jQuery 无限级下拉菜单：

> 灰常方便的无限级下拉菜单，有淡入淡出的效果，虽然淡入淡出在 IE6 里是杯具的。
> 顺便在有子菜单的父菜单右边加了一条 3px 的边表示它还有下级。

<script type="text/javascript">
	$(document).ready(function() {
		$('#menu ul').addClass('children');
		$('#menu .children').prev('a').addClass('notice');
		var f1 = function() {
			$(this).children('ul').fadeIn();
		};
		var f2 = function() {
			$(this).children('ul').fadeOut();
		};
		$('#menu li').hover(f1, f2);
	});
</script>

> 不过可以去除淡入淡出，改为出现和消失，就没有问题啦 O(∩_∩)O，嘿嘿。

<script type="text/javascript">
	$(document).ready(function() {
		$('#menu ul').addClass('children');
		$('#menu .children').prev('a').addClass('notice');
		var f1 = function() {
			$(this).children('ul').show();
		};
		var f2 = function() {
			$(this).children('ul').hide();
		};
		$('#menu li').hover(f1, f2);
	});
</script>

> Demo 传送门 - Http://tool.evlos.org/demo/unlimited_menu

6. 四种下拉菜单打包下载（Update）（jQuery 库的为 Google 托管地址）：

> http://code.google.com/p/evlosbox/downloads/detail?name=menu_demo.rar

7. 蛋疼着给几个理论整合了一下：

> 传说派：哥只是个传说，表迷恋哥。
> 寂寞派：哥吃的不是饭，是寂寞。
> 杯具派：杯具啊！

> 整合版：（- _ -）哥不只是个传说，哥还是个带杯具的寂寞 ~！

8. 欢迎来 Follow 我的 Twitter @AngelSolo 。