汉堡按钮就是几个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
}
效果图片：
css设置按钮样式的方法：定义一个css选择器，然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮交互时样式。button样式需要注意的有几点：
1、建议有一个最小宽度，以免在文字很少时使得按钮过于窄，宽高不协调；
2、建议有一个padding，以免内部文本显得过于拥挤；
2、hover时需要有颜色变化，以告诉用户这是一个可交互元素，更为灵动；
3、获得焦点时应与hover时的效果一致，释放焦点时则回到普通效果。
4、获得焦点时的outline建议去掉，否则较为难看。
普通状态样式设置：.btn{
min-width: 60px
padding: 5px 8px
background: #fff
color: #4daff9
border: 1px solid #4daff9
}
交互状态(hover、focus)样式设置：.btn:hover{
color: #fff
background: #0a90f5
}
.btn:focus{
color: #fff
background: #0a90f5
outline: none
}
