【レスポンシブメニュー】コピペで簡単！CSSとjQueryでの実装方法
昨日はカープがまた負けて、ついに3連敗。日本シリーズ優勝できるのだろうか・・・。テンション下がり気味ですが、この話は置いといて。
今回は、今や必須であるレスポンシブWEBデザイン（モバイルフレンドリー）。そんなレスポンシブ対応したメニューの作成方法をサンプルコード付きでご紹介します。
スマホでタップするとボワっと出現するあのメニューの実装方法になります。ドロワーメニュー（ハンバーガーメニュー）です。なぜハンバーガーメニューと呼ばれるのかというと、三本の線がハンバーガーっぽいからですかね。上下がバンズ、中がハンバーグ的な感じですね。
それではサンプルコードをどうぞ！
HTML
<div id="wrap"> <header> <div class="inner clearfix"> <h1>LOGO</h1> <p class="button"> <span></span> <span></span> <span></span> </p> <nav role="navigation" style="margin-top: 93px;"> <ul class="clearfix"> <li><a href="#">Menu.1</a></li> <li><a href="#">Menu.2</a></li> <li><a href="#">Menu.3</a></li> <li><a href="#">Menu.4</a></li> <li><a href="#">Menu.5</a></li> </ul> </nav> </div> </header> <div id="contents"><div class="overlay" style="display: none;"></div> <p>テキスト</p> </div> </div>
CSS
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
font-family: "Helvetica Neue", Helvetica, 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fixed {
position:fixed;
top:0;
left:0;
width:100%;
}
.overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: #666666;
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
z-index: 999;
}
header {
position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
z-index:9999;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
header .inner {
position:relative;
max-width:1080px;
margin:0 auto;
padding:0.5em 0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
header h1 {
float:left;
width:20%;
margin-top: 1em;
font-size:40px;
font-weight:bold;
}
header nav {
float:right;
width: 60%;
}
header.navOpen nav {
opacity: 1;
right: 0;
}
header nav ul {
width: 100%;
padding: 0 0 0 0px;
}
header nav ul li {
float:left;
width: 16.6666%;
list-style:none;
}
header nav ul li a {
position:relative;
display:block;
padding:1.5em;
color:#999;
text-decoration:none;
}
header nav ul li a:hover {
text-decoration: underline;
}
header .button {
display: none;
width: 30px;
position: absolute;
top: 20px;
right: 15px;
cursor: pointer;
}
header .button span {
display: block;
height: 4px;
width: 100%;
background: #000000;
border-radius: 2px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
header .button span:nth-of-type(2),
header .button span:nth-of-type(3) {
margin-top: 5px;
}
header.navOpen .button span:nth-of-type(1) {
-webkit-transform: translateY(9px) translateX(0) rotate(45deg);
-ms-transform: translateY(9px) translateX(0) rotate(45deg);
transform: translateY(9px) translateX(0) rotate(45deg);
}
header.navOpen .button span:nth-of-type(2) {
margin-top: 5px;
opacity: 0;
-webkit-transform: translateY(9px);
-ms-transform: translateY(9px);
transform: translateY(9px);
}
header.navOpen .button span:nth-of-type(3) {
-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-9px) translateX(0) rotate(-45deg);
transform: translateY(-9px) translateX(0) rotate(-45deg);
}
#contents {
max-width: 1080px;
margin:120px auto 0;
padding:1em 1.5em;
line-height:1.5;
}
#contents p {
margin: 50px 0 0 0;
}
@media screen and (max-width:1080px){
header .inner {
padding: 1.5em;
}
header h1 {
width: 30%;
margin-top: 0em;
}
header nav {
width:70%;
}
header nav ul li {
width: 25%;
}
#contents {
margin-top:180px;
}
}
@media screen and (max-width:480px){
header h1 {
width: auto;
margin-top: 0;
}
header .button {
display:block;
}
header nav {
overflow:auto;
position: fixed;
top: 0;
right: -70%;
float:none;
width: 45%;
max-width:320px;
height: 100%;
background: #fff;
opacity: 0;
z-index:9999;
}
header nav ul li {
float: none;
width: auto;
}
#contents {
margin-top:80px;
}
}
jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#contents').prepend('<div class="overlay"></div>');
$('.button').click(function() {
$('header').toggleClass('navOpen');
$('#wrap').toggleClass('fixed');
$('.overlay').toggle();
var headerH = $('header').outerHeight();
if ($('header').hasClass('navOpen')) {
$('header nav').css('marginTop', headerH + 'px');
}
});
$('.overlay').click(function() {
$(this).fadeOut(300);
$('header').removeClass('navOpen');
$('#wrap').removeClass('fixed');
});
$(window).on('load resize', function() {
var breakpoint = 640;
if (window.innerWidth > breakpoint) {
$('header').removeClass('navOpen');
$('#wrap').removeClass('fixed');
$('.overlay').hide();
$('header nav').css('marginTop', 0 + 'px');
}
});
});
</script>