横向纵向菜单
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>横向纵向菜单</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<style type="text/css">
.css_menu ul, li
{
list-style: none;
padding: 0;
margin: 0; /*float: left; 启用此项则变成横向菜单 */
}
.css_menu_title
{
background-color: Gray;
width: 120px;
margin: 1px;
}
.css_menu_title ul
{
background-color: Silver;
display: none;
width: 100%;
}
.css_menu_title ul li
{
display: block;
width: 100%;
}
.css_menu a
{
text-decoration: none;
text-align: center;
display: block;
width: 100%;
}
.css_menu_title a
{
color: White;
}
.css_menu_title li a
{
color: Black;
display: block;
width: 100%;
}
</style>
<script type="text/javascript">
$(function() {
$(".css_menu_title > a").click(function() {
//主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
// if (ulNode.css("display") == "none") {
// ulNode.show("slow");
// }
// else {
// ulNode.hide("slow");
// }
ulNode.slideToggle();
});
});
</script>
</head>
<body>
<div class="css_menu">
<ul>
<li class="css_menu_title"><a href="#">菜单项1 </a>
<ul>
<li><a href="#">子菜单项1-1</a></li>
<li><a href="#">子菜单项1-2</a></li>
</ul>
</li>
<li class="css_menu_title"><a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项2-1</a></li>
<li><a href="#">子菜单项2-2</a></li>
</ul>
</li>
<li class="css_menu_title"><a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项3-1</a></li>
<li><a href="#">子菜单项3-2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>横向纵向菜单</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<style type="text/css">
.css_menu ul, li
{
list-style: none;
padding: 0;
margin: 0; /*float: left; 启用此项则变成横向菜单 */
}
.css_menu_title
{
background-color: Gray;
width: 120px;
margin: 1px;
}
.css_menu_title ul
{
background-color: Silver;
display: none;
width: 100%;
}
.css_menu_title ul li
{
display: block;
width: 100%;
}
.css_menu a
{
text-decoration: none;
text-align: center;
display: block;
width: 100%;
}
.css_menu_title a
{
color: White;
}
.css_menu_title li a
{
color: Black;
display: block;
width: 100%;
}
</style>
<script type="text/javascript">
$(function() {
$(".css_menu_title > a").click(function() {
//主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
// if (ulNode.css("display") == "none") {
// ulNode.show("slow");
// }
// else {
// ulNode.hide("slow");
// }
ulNode.slideToggle();
});
});
</script>
</head>
<body>
<div class="css_menu">
<ul>
<li class="css_menu_title"><a href="#">菜单项1 </a>
<ul>
<li><a href="#">子菜单项1-1</a></li>
<li><a href="#">子菜单项1-2</a></li>
</ul>
</li>
<li class="css_menu_title"><a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项2-1</a></li>
<li><a href="#">子菜单项2-2</a></li>
</ul>
</li>
<li class="css_menu_title"><a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项3-1</a></li>
<li><a href="#">子菜单项3-2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
