用javascript写一个下拉菜单,100分奖励!!!

发布网友发布时间：2022-04-26 15:46

共3个回答

热心网友时间：2022-04-22 17:49

您好：这个很简单。刚才给你写了一个比较粗糙的例子，因为样式我随便定义的，你可以自己加上好看的样式。不过需要用到jquery库，如果没有可以加我：1534968714.我发给你。
代码如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
<script src="jquery-1.4.2.js"></script>
<style>
ul {
list-style:none;
}
.mod_navigation {
width:150px;
border:1px solid red;
}
.mod_nav_site {
display:none;
}
</style>
<script type="text/javascript">
$(function () {
$(".nav_item").mouseover(function () {
$(".mod_nav_site").slideDown(500).css("display","block");
});
$(".nav_item").mouseout(function () {
$(".mod_nav_site").slideDown(500).css("display", "none");
});
});
</script>
</head>
<body>
<div class="mod_navigation">
<div class="nav_all">
<div class="nav_all_item"><a class="nav_item">鼠标放上去,就显示</a> </div>
<div class="mod_nav_site">
<ul>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
<li><a href="#" class="nav_item">哇哈哈</a></li>
</ul>

</div>
</div>
</div></body>
</html>

热心网友时间：2022-04-22 19:07

用Jquery 实现非常简单

下面是代码:

<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".mod_nav_site").hide();
$(".nav_item").mouseover(function(){
$(".mod_nav_site").slideDown(1000);
});
$(".nav_item").mouseout(function(){
$(".mod_nav_site").slideUp(1000);
});
});
</script>
</head>

热心网友时间：2022-04-22 20:42

用Bootstrap吧，大多数WebUI效果直接用。