汉堡按钮 css怎么写

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了汉堡按钮 css怎么写相关的知识，希望对你有一定的参考价值。

汉堡按钮就是几个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/html; charset=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;

效果图片：

 参考技术A 1.a标签(<a href='#'></a>),优点就是鼠标覆盖有个手型的鼠标变化，链接也可以直接写上去；
2.<input type='button'> 传统意义上的按钮标签
3.<button></button> 最推荐使用的就是第三种了，因为这个标签有一些属性，比如disable这样的属性，一方面，样式容易控制，另一方面JS开发的时候也方便控制！ 参考技术B 具体还要写成什么样，给一个效果图就知道怎么写了

scss 轻松创建汉堡包按钮。

<button class="hamburger">
  Menu
</button>
.hamburger {
  @include hamburger( 40px, 4px, #ccc );
}
// Hamburger menu creator
@mixin hamburger( $width, $height, $background ) {
  position: relative;
  display: block;
  overflow: visible;
  width: $width;
  border: 0;
  font-size: 0;
  line-height: 1;
  -webkit-appearance: none;

  &, &:before, &:after {
    height: $height;
    background-color: $background;
  }

  &:before, &:after {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    content: " ";
  }

  $newHeight: -#{(strip-units($height) * 2)}px;

  &:before {
    top: $newHeight;
  }

  &:after {
    bottom: $newHeight;
  }
}

以上是关于汉堡按钮 css怎么写的主要内容，如果未能解决你的问题，请参考以下文章

html这种怎么写？放大镜，还有搜索按钮都在文本框内。

HTML中怎么写能可以 点一个按钮然后跳转另一个页面

汉堡按钮的实现

用css写一个简单的按钮

汉堡菜单按钮显示复选框

将汉堡按钮添加到 React Native Navigation