WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

ハンバーガーメニュー

<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWD-ハンバーガーメニュー</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,p,ul,li,a{
margin: 0;
padding: 0;
line-height: 1.0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
/*PCレイアウト*/

P{
display: none;
}
nav {
width: 100%;
background:#77CCF0;
margin: 50px auto 0;
}
#menu{
max-width: 960px;
margin:0 auto;
overflow: hidden;
}
#menu li{
float: left;
width: 25%;
height: 50px;
box-sizing: border-box;
}
#menu li a{
display: block;
line-height: 50px;
text-align: center;
background:#24A1F0;
color: #fff;
border-right: 2px solid #fff;
} 
#menu li:first-child a{
border-left:2px solid #fff;
}
#menu li a:hover{
background:#77CCF0;
}
.box {
width: 100%;
height: 3000px;
}
footer {
width: 100%;
height: 200px;
background: #EB8384;
}
@media screen and (max-width:767px){
p{
display: block;
width: 100px;
height: 100px;
background: #24A1F0;
border-radius: 8px;
margin: 50px auto;
position: relative;
}
span{
display: block;
width: 60px;
height: 6px;
background-color: #fff;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin:auto;
border-radius: 4px;
transition: 0.1s;
}
span:before{
display: block;
content:"";
width: 60px;
height: 6px;
background-color: #fff;
position: absolute;
top: -40px;
right: 0;
bottom: 0;
left: 0;
margin:auto;
transition: 0.2s;
border-radius: 4px;
}
span:after{
display: block;
content:"";
width: 60px;
height: 6px;
background-color: #fff;
position: absolute;
top:0;
right: 0;
bottom: -40px;
left: 0;
margin:auto;
transition: 0.2s;
border-radius: 4px;
}
p.click span{
background: transparent;
}
p.click span:before{
top: 0;
transform: rotate(45deg);
}
p.click span:after{
bottom: 0;
transform: rotate(135deg);
}

nav {
width: 300px;
height: 200px;
margin: 0 auto;
background:transparent;
display: none;
}
#menu{
overflow: visible;
}
#menu li{
float: none;
width: 100%;
height: 50px;
}
#menu li a{
display: block;
line-height: 50px;
border-top: 2px solid #fff;
border-right: none;
}
#menu li:first-child a{
border-left: none;
border-top: none;
}
}
</style>
</head>
<body>
<p id="btn"><span></span></p>
<nav>
<ul id="menu">
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
</ul>
</nav>
<div class="box">
</div>
<footer></footer>
</body>

RWD-ハンバーガーメニュー