您的位置：首页 > Web前端 > JQuery

jQuery 菜单

2016-07-03 02:06 323 查看

一、垂直菜单的实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="app.css" rel="stylesheet"/>
<script src="jquery-1.10.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
</ul>
</body>
</html>

ul,li{
list-style: none;
}

ul{
padding: 0;
margin: 0;
}

.main{
background-color: #666666;
background-repeat: repeat-x;
width: 100px;
}

li{
background-color: #eeeeee;
}

a{
text-decoration: none;
padding-left: 20px;
display: block;
width: 80px;
padding-top: 3px;
padding-bottom: 3px;
}

.main a{
color: white;
}

.main li a{
color: black;
}

.main ul{
display: none;
}

$(document).ready(function(){
$(".main>a").click(function(){
var ulNode = $(this).next("ul");
ulNode.toggle("normal");
});
});

二、水平菜单的实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="app.css" rel="stylesheet"/>
<script src="jquery-1.10.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<ul>
<li class="hmain">
<a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
</ul>
</body>
</html>

ul,li{
list-style: none;
}

ul{
padding: 0;
margin: 0;
}

.main,.hmain{
background-color: #666666;
background-repeat: repeat-x;
width: 100px;
}

li{
background-color: #eeeeee;
}

a{
text-decoration: none;
padding-left: 20px;
display: block;
width: 80px;
padding-top: 3px;
padding-bottom: 3px;
}

.main a,.hmain a{
color: white;
}

.main li a,.hmain li a{
color: black;
}

.main ul,.hmain ul{
display: none;
}

.hmain{
float: left;
margin-right: 1px;
}

.main{
margin-top: 1px;
}

$(document).ready(function(){
$(".main>a").click(function(){
var ulNode = $(this).next("ul");
ulNode.toggle("normal");
});

$(".hmain").hover(function(){
$(this).children("ul").slideDown();
},function(){
$(this).children("ul").slideUp();
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 菜单 Query

相关文章推荐

新的分享

章节导航