USharing<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style type="text/css">
.header_title{text-align: center; height: 40px; line-height: 40px; color: #fff; width: 100%; font-size: 24px; background: darkred; position: relative;}
.header_btn{width: 22px; height: 22px; right: 9px; top: 9px;}
.toggle_menu {position: fixed; bottom: 0; background: darkred; height: 600px; width: 100%; text-align: center; color: #fff; display: none;border-top-left-radius:1em; border-top-right-radius:1em;}
</style>
<body>
<div class= "header">
<p class="header_title">测试Title</p>
<div class="header_btn">
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</div>
</div>
<div class="toggle_menu">
这也是很长的段落
</div>
<script type="text/javascript">
$(".header_btn").click(function(){
$(".toggle_menu").animate({
height:'toggle'
});
});
</script>
</body>
</html>
2,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style type="text/css">
.header_title{text-align: center; height: 40px; line-height: 40px; color: #fff; width: 100%; font-size: 24px; background: darkred; position: relative;}
.header_btn{width: 22px; height: 22px; right: 9px; top: 9px;}
.toggle_menu {position: fixed; bottom: 0; background: darkred; width: 100%; text-align: center; color: #fff; display: none;border-top-left-radius:1em; border-top-right-radius:1em;}
/*点击按钮*/
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/*九宫格*/
.box-wrap {
text-align: center;
overflow: hidden;
}
.box-wrap>div {
width: 33.333%;
padding-bottom: 33.333%;
/*margin: 1px;*/
border-radius: 10%;
float: left;
background-color: gray;
position: relative;
}
</style>
<body>
<div class= "header">
<p class="header_title">测试Title</p>
<div class="header_btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
<div class="toggle_menu">
<div class="box-wrap">
<div class="box">
<ul style="position: absolute; margin: 0; padding: 0; transform: translate(0, 50%);">
<img src="./post.png" width="40%" style="">
<li>发帖</li>
</ul>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<script type="text/javascript">
function myFunction(x) {
x.classList.toggle("change");
}
$(".header_btn").click(function(){
$(".toggle_menu").animate({
height:'toggle'
});
});
</script>
</body>
</html>
