スマホの左上や右上によく見かけるメニューボタンのサンプルです。
ハンバーガーメニューとも言われますが、そのボタンを押すとクローズボタンに切り替わります。
メニュー自体は実装してませんので、この演出を活用してページにあったメニュー表示を実装してください。
メニューボタンサンプル
CSS
.stage{
background-color:#999;
width: 50px;
height:50px;
}
.menu_toggle,
.menu_toggle div {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
z-index: 999;
}
.menu_toggle {
position: relative;
width: 30px;
height: 26px;
left: 10px;
top: 12px;
}
.menu_toggle div {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;
}
.menu_toggle div:nth-of-type(1) {
top: 0;
}
.menu_toggle div:nth-of-type(2) {
top: 11px;
}
.menu_toggle div:nth-of-type(3) {
bottom: 0;
}
.menu_toggle.open div:nth-of-type(1) {
-webkit-transform: translateY(11px) rotate(-45deg);
transform: translateY(11px) rotate(-45deg);
}
.menu_toggle.open div:nth-of-type(2) {
opacity: 0;
}
.menu_toggle.open div:nth-of-type(3) {
-webkit-transform: translateY(-11px) rotate(45deg);
transform: translateY(-11px) rotate(45deg);
}
.menu_toggle[data-notice]:not(.open)::after{
content:attr(data-notice);
position:absolute;
top:-10px;
right:-16px;
width:1.5rem;
height:1.5rem;
text-align: center;
line-height: 1.8;
font-size:0.9rem;
font-weight:600;
color:white;
background:#fc0100;
z-index:1000;
border-radius:50%;
border:#033a22 3px solid;
display: block;
text-indent: -1px;
letter-spacing: 0;
}JavaScript
$(function(){
$("#menu_button").on('click',function(e){
$("#menu_button").toggleClass('open');
});
});html
<div class="stage">
<a class="menu_toggle" id="menu_button" href="#">
<div></div>
<div></div>
<div></div>
</a>
</div>
