当前位置: 代码迷 >> Web前端 >> 合适超级新手的JQuery多级菜单
  详细解决方案

合适超级新手的JQuery多级菜单

热度:140   发布时间:2012-10-25 10:58:57.0
适合超级新手的JQuery多级菜单

?

?

?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script type="text/javascript" >

$(document).ready(function() {

$("li.x_1").mousemove(function(){

$(this).children().slideDown(180);

});

$("li.x_1").mouseleave(function(){

$(this).children().slideUp(180);

});

?

$(".x_1 ul li").hover(function(){

$(this).children().slideDown(180);

},function(){

$(this).find("ul").slideUp(180);

});

$(".j2").hover(function(){

$(this).find("ul").slideDown(180);

},function(){

$(this).find("ul").slideUp(180);

});

});

</script>

<style type="text/css">

.firt{background-color:bule;}

.x_1{float:left;list-style-type:none;line-height:30px; height:30px;width:140px;background-color:blue;margin-left:2px;

text-align:center;}

.x_1:hover{background-color:red;}

.x_1 ul{display:none;position:absolute;margin-left:-40px;}

.x_1 ul li{background-color:blue;list-style-type:none;width:140px;}

.x_1 ul li:hover{background-color:red;}

a{color:#ffffff;underline:none;}

.i2 ul{display:none;position:absolute;margin-left:102px;margin-top:-30px; }

.j2 ul{display:none;position:absolute;margin-left:102px;margin-top:-30px; }

</style>

</head>

<body>

<ul id="firt" class="firt">

<li class="x_1">

第一个主菜单

<ul>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

</ul>

</li>

<li class="x_1">

第二个主菜单

<ul>

<li class="i2" >

<a ?href="#">子菜单ttt</a>

<ul class="i3" >

<li><a href="#">子菜单2</a></li>

<li><a href="#">子菜单2</a></li>

<li><a href="#">子菜单2</a></li>

<li class="j2">

<a href="#">子菜单2</a>

<ul class="j3" >

<li><a href="#">子菜单3</a></li>

<li><a href="#">子菜单3</a></li>

<li><a href="#">子菜单3</a></li>

<li><a href="#">子菜单3</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

</ul>

</li>

<li class="x_1">

第三个主菜单

<ul>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

</ul>

</li>

</ul>

</body>

</html>

?

我也是超级新手,昨天开始学的jquery 我觉得我们新手学的时候就需要一些想我这样简单的列子才看的懂!!

  相关解决方案