使用jquery和css3.0编写菜单

1.jquery做菜单原理和方法

原理：

    使用选择器选择要选的元素

    触发元素相应的事件

    在事件中使用jquery的效果

    在事件中改变元素的css样式

方法：

    首先使用元素的mouseover（mouseenter）方法，触发事件，然后调用jquery效果的方法

show(slideDown,fideIn)显示菜单，同时可以调用css方法改变样式，最后调用jquery的效果方法收起菜单hide(slideUp,fideOut)：

$(“元素”).mouseover(function(){

$(“元素”).show();

$(“元素”).css({

background-color:red;

…

});

});

$(“元素”).mouseleave(function(){

$(“元素”).hide();

$(“元素”).css({

background-color:red;

…

});

});

2.css3.0做菜单原理和方法

原理：

    主要使用UI元素状态伪类选择器（hover）与元素的display属性

方法：

    主要对元素使用hover，对父元素触发hover事件改变子元素：

父元素：hover >子元素{display：block;}

    使用hover改变元素的样式：

元素：hover{}

3.两种方法的比较

这两种方法都是当鼠标放在元素上时，菜单显示出来。鼠标离开时，菜单收起来。只是实现的方式不一样而已。可是使用jquery通过事件驱动来完成，比较灵活，可以使元素触发不同的事件。而css3只能通过hover实现。而且jquery可以通过事件驱动，调用其他方法，完成一些其他的功能，比如：向页面增加元素，改变元素的内容等。而css3是无法做到的，它只能改变元素的样式，而jquery也能调用css()方法改变元素的样式，而且是动态的改变。jquery的显示和隐藏菜单有3种效果可选，而css3只能是hover，没有其他可选的。

因此，使用jquery和css3.0结合在一起做菜单比较完美。css3只做它应该做得事，jquery也是。这样分工比较明确，达到的效果也是最好的。