论坛
标题:
弹出层与折叠菜单作业
[打印本页]
作者:
我要学代码
时间:
2018-7-30 16:03
标题:
弹出层与折叠菜单作业
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层与折叠菜单</title>
<script src="新建文件夹 (2)/jquery-3.0.0/jquery-3.0.0.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$(".box").css("display","block");
$(".close").click(function(){
$(".box").css("display","none")
})
// $(".box").show();
//$(".box").hide();
})
})
$(function(){
$(".mune").first().show();
$(".nav").click(function(){
$(this).next(".mune").slideToggle().siblings(".mune").slideUp();
})
})
</script>
<style>
.wrap{position:fixed; top:300px; left:150px;}
.btn{ width:100px; height:30px; background:#CCC; text-align:center; line-height:30px; }
.box{ width:1000px; height:800px; background:#CCC; margin:0 auto; position:relative; display:none;}
.close{ width:30px; height:30px; background:#000; font-size:16px; color:#FFF; text-align:center; line-height:30px; position:absolute; right:-30px}
.nav{ width:100px; height:30px; background:#F00; text-align:center; line-height:30px;border-bottom:#FFF 1px solid; color:#FFF;}
.mune{ display:none; }
li{ list-style:none; width:80px; height:20px; background:#CCC; text-align:center; line-height:20px; padding:10px; border-bottom:#FFF 1px solid; }
a{ text-decoration:none; color:#505050;}
</style>
</head>
<body>
<div class="btn">登录</div>
<div class="box">
<div class="close">×</div>
</div>
<div class="gdt" style="height:1500px"></div>
<div class="wrap"><!--固定定位-->
<div class="nav">菜单一</div>
<div class="mune">
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
<li><a href="#">内容4</a></li>
<li><a href="#">内容5</a></li>
</div>
<div class="nav">菜单二</div>
<div class="mune">
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
<li><a href="#">内容4</a></li>
<li><a href="#">内容5</a></li>
</div>
<div class="nav">菜单三</div>
<div class="mune">
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
<li><a href="#">内容4</a></li>
<li><a href="#">内容5</a></li>
</div>
</div>
</body>
</html>
欢迎光临 论坛 (http://bbs.qinxue.com/)
Powered by Discuz! X3.1