![CSS 点击按钮以后修改DIV的高度，代码怎么写？[有代码]](/aiimages/CSS+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E4%BB%A5%E5%90%8E%E4%BF%AE%E6%94%B9DIV%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E4%BB%A3%E7%A0%81%E6%80%8E%E4%B9%88%E5%86%99%EF%BC%9F%5B%E6%9C%89%E4%BB%A3%E7%A0%81%5D.png)
<div style="border:1px solid #ccccccwidth:150pxheight:25px">
<input type="text" style="border:0margin-left:5pxwidth:110pxheight:25pxline-height:25px" />
<input type="button" value="" style="background:url(searchBtn.gif) no-repeat center centerwidth:15pxheight:15pxmargin:5px" />
</div>
以上为大概思路，具体数值还需根据实际情况进行调整！
汉堡按钮就是几个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
}
效果图片：
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#search").click(function () {
$("#load").fadeIn("slow")
})
})
</script>
</head>
<body>
<div id="load" style="display: none">
<img alt="waiting..." src="images/wait.gif" />
加载中,请稍等...
</div>
<input id="search" type="button" value="查询" />
</body>
</html>
