汉堡按钮 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 轻松创建汉堡包按钮。
以上是关于汉堡按钮 css怎么写的主要内容,如果未能解决你的问题,请参考以下文章