JQuery实现华丽的水平下拉菜单

我过去常常在网站上看到菜单显示。鼠标上移，出现下拉效果，很华丽。看完JQuery视频，发现很容易实现。

在Html中，通过ul和li标签写出所需的元素。复制的代码如下： body ul Li class=' hmain ' a href=' # '菜单项1/a ul href=' # '子菜单项11/a/Li href=' # '子菜单项12/a/Li/ul/Li Li class=' hmain ' a href=' #。菜单项2/a ul href=' # '子菜单项21/a/Li href=' # '子菜单项22/a/Li/ul/Li Li class=' hmain ' a href=' # '菜单项3/a ul href=' # '子菜单项31/a/Li href=' #='。子菜单项32/a /li /ul /li /ul /body最外层ul中的元素li为菜单项1、菜单项2和菜单项3，下拉菜单分别位于每个主菜单下。如果菜单的最外层是UL，一楼的每个主菜单都放在一个里。如果有子菜单，可以在这个主菜单的li中构建一个新的UL，然后依次嵌套构建一个多层菜单。CSS中复制的代码如下： ul，li{ /*清除ul和li *上的点/list-style : none；} ul{ /*清除子菜单的缩进值*/padd :0；margin:0} .hmain{ background-image:url(./images/title . gif)；//前面小三角背景-repeat : repeat-x；宽度width:120px} Li { background-color : # EEEEEEE；//背景图片覆盖背景色} a{ //取消所有下划线文字-装饰： none；左填充left:20px显示：块；/*块集元素可以填充区域*/display : inline-Block；宽度width:100pxpadding-top :3 px；填充-bottom :3 px；} .hmain a { color:white背景-图像：url(./images/collapsed . gif)；背景-repeat : no-repeat；背景-位置：3px中心；} .hmain阿利{ color:black背景-image : none；} .hmain ul { display:none} .hmain { float:left右边距：1 px；}strong /strong Html引用js文件jquery.js和menu.js，其中menu.js如下：复制的代码如下： $(文档)。ready(function(){//页面中的DOM已经加载$()时要执行的代码。主a，hmain a ')。点击(function(){ //找到子菜单项var ulNode=$(this)。对应于主菜单项的下一个(‘ul’)；ulnode . slide toggle()；change icon($(this))；});$('.hmain’)。悬停(function(){ $(this))。儿童(' ul ')。slide Toggle()；changeIcon($(this)。儿童(' a ')；}，function(){ $(this)。儿童(' ul ')。slide Toggle()；changeIcon($(this)。儿童(' a ')；});});/* *修改主菜单的指示器图标*/功能更改图标(主节点){if(主节点){if(主节点. css ('background-image ')。的索引(' collapsed . gif ')=0){ main node . CSS(' background-image '，' URL()。} else { mainnode . CSS(' background-image '，' URL(' images/collapsed . gif ')))；}}}这个华丽的下拉菜单就完成了。实现很简单，但是小知识点零碎。比如。主a和。maina是前者选择使用这个类的元素中的所有A节点。main，而后者只在的子节点中选择A节点。主要的。这个例子很适用，用在网站上界面看起来更美观。只看到三个例子，花点时间继续看。