jQuery制作的网页菜单导航

最新推荐文章于 2024-08-26 15:38:11 发布

可乐猫哈

最新推荐文章于 2024-08-26 15:38:11 发布

阅读量2.9k

点赞数 4

本文链接：https://blog.csdn.net/qq_39027256/article/details/78735321

版权

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>菜单制作</title>
<style type="text/css">

body
{
background:#FCDFE2;
}
#main_menu
{
list-style:none;
}
.li
{
border-bottom:solid;
border-bottom-width:0.5px;
border-bottom-color:#fff;
width:200px;
}
a:hover{
color:orange;
}
.ul
{
list-style:none;
}
.a
{
height:30px;
width:200px;
padding-left:2px;
display:block;
background:#D02230;
line-height:25px;
border-left:solid;
border-left-width:10px;
border-left-color:#7C1B12;
color:white;
font-family:"微软雅黑";
}

.ul a
{
height:25px;
width:190px;
margin-left:-40px;
padding-left:2px;
display:block;
background:#F56071;
border-left:solid;
border-left-width:20px;
border-left-color:#ac2918;
border-bottom:solid;
border-bottom-width:0.5px;
border-bottom-color:#fff;
color:white;
font-family:"微软雅黑";
}

.ul a:hover
{
color:#FFCC00;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<div>
<ul id="main_menu">
<li class="li">
<a class="a">电影明星</a>
<ul class="ul">
<li><a>李连杰</a></li>
<li><a>成龙</a></li>
<li><a>周星驰</a></li>
<li><a>金城武</a></li>
<li><a>刘德华</a></li>
</ul>
</li>
<li class="li">
<a class="a">篮球明星</a>
<ul class="ul">
<li><a>科比</a></li>
<li><a>詹姆斯</a></li>
<li><a>乔丹</a></li>
<li><a>姚明</a></li>
<li><a>易建联</a></li>
</ul>
</li>
<li class="li">
<a class="a">足球明星</a>
<ul class="ul">
<li><a>梅西</a></li>
<li><a>C罗</a></li>
<li><a>内马尔</a></li>
<li><a>贝克汉姆</a></li>
<li><a>马拉多纳</a></li>
</ul>
</li>
<li class="li">
<a class="a">音乐明星</a>
<ul class="ul">
<li><a>李宇春</a></li>
<li><a>毛不易</a></li>
<li><a>许巍</a></li>
<li><a>罗志祥</a></li>
<li><a>梁静茹</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

jQuery:

$(document).ready(function() {
//$(".ul").css("display","none");
$(".ul").hide();
$(".a").toggle(function(){
$(this).siblings().show();
},function(){
$(this).siblings().hide();
});
}
);