css这样实现
html如下
.download-block{
width:90%
height:100px
background:#0b0e32
/*margin: 100px auto 0*/
margin:0 auto
position:absolute
left:0
right:0
transition-duration:2s
opacity:0.7
}
.download-block1{
background:transparent
height:100px
overflow:hidden
position:relative
left:0
top:-100px
right:0
padding-top:100px
transition-duration:2s
opacity:0.7
cursor:pointer
}
.download-block1:hover{
padding-top:0
transition-duration:2s
opacity:0.7
}
汉堡按钮就是几个css动画，加上javascript的onclick事件的绑定，很简单的。我给你写了一个，你看看效果吧。这个用了css的媒体查询功能，电脑上看得时候要把浏览器窗口缩小才看得到效果。
文件:index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/mp.css" charset="utf-8">
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<meta name="viewport" content="width=10,initial-scale=1,user-scalable=no">
<meta name="applicable-device" content="pc,mobile" />
</head>
<body>
<div id="hb" onclick="hb()">
<div id="hb1"></div>
<div id="hb2"></div>
<div id="hb3"></div>
</div>
<ul id="ul1">
<li><a href="index.html">首页</a></li>
<li><a href="lmone/lmone.html">$lanmu1$</a></li>
<li><a href="lmtwo/lmtwo.html">$lanmu2$</a></li>
<li><a href="lmthree/lmthree.html">$lanmu3$</a></li>
<li><a href="lmfour/lmfour.html">$lanmu4$</a></li>
<li><a href="lmfive/lmfive.html">$lanmu5$</a></li>
</ul>
<script type="text/javascript" src="js/hb.js"></script>
</body>
</html>
文件：mp.css
/*手机*/
@media screen and (max-width:700px){
*{
margin:0
padding:0
}
html,body{
overflow:hidden
overflow-y:auto
}
a{
text-decoration:none
color:gray
}
body{
background:rgb(233,234,237)
}
/*汉堡按钮*/
#hb{
float:left
width:20%
height:60px
background:rgb(28,35,39)
overflow:hidden
}
#hb1,#hb2,#hb3{
position:relative
clear:both
width:100%
height:9px
background:gray
}
#hb1{
top:8%
}
#hb2{
top:25%
}
#hb3{
top:43%
}
@keyframes hb1
{
from {
transform:rotate(0deg)
top:8%
}
to {
transform:rotate(45deg)
top:40%
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
transform:rotate(0deg)
top:8%
}
to {
transform:rotate(45deg)
top:40%
}
}
@keyframes hb11
{
from {
transform:rotate(45deg)
top:40%
}
to {
transform:rotate(0deg)
top:8%
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
transform:rotate(45deg)
top:40%
}
to {
transform:rotate(0deg)
top:8%
}
}
@keyframes hb2
{
from {
transform:rotate(0deg)
}
to {
transform:rotate(-45deg)
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
transform:rotate(0deg)
}
to {
transform:rotate(-45deg)
}
}
@keyframes hb22
{
from {
transform:rotate(-45deg)
}
to {
transform:rotate(0deg)
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
transform:rotate(-45deg)
}
to {
transform:rotate(0deg)
}
}
#ul1{
float:left
width:95%
height:15em
background:rgb(28,35,39)
margin-top:1%
padding-left:5%
display:none
}
@keyframes ul1
{
from {
height:0
}
to {
height:15em
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
height:0
}
to {
height:15em
}
}
@keyframes ul11
{
from {
height:15em
}
to {
height:0
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
height:15em
}
to {
height:0
}
}
#ul1 li{
display:inline
float:left
width:95%
margin-top:15px
color:white
}
#ul1 li:hover{
background:gray
}
#ul1 li a{
color:white
}
}
文件：hb.js
hb1=document.getElementById("hb1")
hb2=document.getElementById("hb2")
hb3=document.getElementById("hb3")
ul1=document.getElementById("ul1")
var js=0
function hb(){
if(js%2==0){
ul1.style.display="block"
ul1.style.animation="ul1 0.6s"
hb3.style.display="none"
hb1.style.animation="hb1 0.6s"
hb1.style.transform="rotate(45deg)"
setTimeout("hb1.style.top='40%'","600")
hb2.style.animation="hb2 0.6s"
hb2.style.transform="rotate(-45deg)"
}
if(js%2==1){
ul1.style.animation="ul11 0.6s"
setTimeout("ul1.style.display='none'","600")
setTimeout("hb3.style.display='block'","500")
hb1.style.animation="hb11 0.6s"
hb1.style.transform="rotate(0deg)"
setTimeout("hb1.style.top='8%'","600")
hb2.style.animation="hb22 0.6s"
setTimeout("hb2.style.transform='rotate(0deg)'","600")
}
js=js+1
}
效果图片：
