index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<title>jqery 2017/08/21</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div id="rwdMenuWrap">
<div id="switchBtnArea">
<a href="javascript:void(0);" id="swichBtn"></a>
</div>
<nav id="globalMenu">
<ul>
<li><a href="#">WORKS</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">RECRUIT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</body>
</html>
-------
style.css
@charset "utf-8";
a:link,a:visited,a:active,a:hover { text-decoration: none; color: #000;}
#globalMenu {
width: 100%;
height: 45px;
background: #ebebeb;
background: linear-gradient(to bottom, #ebebeb 45%,#d8d8d8 55%);
border-top: #aaa 1px solid;
border-bottom: #aaa 1px solid;
position: relative;
z-index: 10;
}
#globalMenu ul {
margin: 0 auto;
width: 800px;
height: 45px;
text-align: left;
}
#globalMenu ul li {
width: 160px;
height: 45px;
float: left;
border-left: #aaa 1px solid;
box-sizing: border-box;
}
#globalMenu ul li:last-child {
border-right: #aaa 1px solid;
}
#globalMenu ul li a {
height: 45px;
font-weight: bold;
line-height: 45px;
display: block;
text-align: center;
transition: all 0.2s linear;
}
#globalMenu ul li:hover > a {
background: #fff;
}
#contents {
margin: 0 auto;
padding: 40px 0;
width: 800px;
text-align: left;
}
#contents p {
padding-bottom: 2em;
font-size: 0.9em;
line-height: 1.8em;
}
/* ------------------------------
MEDIAQUERIES LAYOUT
------------------------------ */
@media only screen and (max-width: 800px) {
#globalMenu ul {
width: 100%;
}
#globalMenu ul li {
width: 20%;
}
}
/* ------------------------------
MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 768px) {
#globalMenu {
display: none;
}
#menuOverlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: none;
position: fixed;
z-index: 97;
}
#switchBtnArea {
width: 100%;
height: 60px;
background: #3c3c3c;
border-bottom: #aaa 1px solid;
position: relative;
}
#switchBtnArea #switchBtn {
top: 10px;
left: 10px;
width: 40px;
height: 40px;
background: #a7a7a7 url(../img/btnOpen.png) no-repeat center center;
border-radius: 5px;
position: absolute;
z-index: 98;
}
#switchBtnArea #switchBtn.btnClose {
background: transparent url(../img/btnClose.png) no-repeat center center;
}
#rwdMenuWrap {
top: 0;
left: -200px;
width: 200px;
height: 100%;
background: #3c3c3c;
overflow: auto;
position: fixed;
z-index: 99;
}
#rwdMenuWrap ul {
width: 100%;
}
#rwdMenuWrap ul li {
width: 100%;
border-bottom: #aaa 1px solid;
}
#rwdMenuWrap ul li a {
padding: 15px 20px;
text-align: left;
background: #ebebeb url(../img/linkarw.png) no-repeat right center;
display: block;
}
#contents {
width: 100%;
}
#contents p {
padding: 0 20px 2em 20px;
}
}
#globalMenu > ul:before,
#globalMenu > ul:after {
content: " ";
display: table;
}
#globalMenu > ul:after {clear: both;}
#globalMenu > ul {*zoom: 1;}
--------
js
$(function(){
var rwdMenu = $('#globalMenu'),
switchPoint = 768,
slideSpeed = 300,
fadeSpeed = 500;
var menuSouce = rwdMenu.html();
$(window).load(function(){
function menuSet(){
if(window.innerWidth < switchPoint){
if(!($('#rwdMenuWrap').length)){
$('body').prepend('<div id="menuOverlay"></div><div id="switchBtnArea"><a href="javascript:void(0);" id="switchBtn"></a></div><div id="rwdMenuWrap"></div>');
$('#rwdMenuWrap').append(menuSouce);
var menuOverlay = $('#menuOverlay'),
switchBtn = $('#switchBtn'),
btnLeft = parseInt(switchBtn.css('left')),
menuWrap = $('#rwdMenuWrap'),
menuWidth = menuWrap.outerWidth();
switchBtn.on('click', function(){
if($(this).hasClass('btnClose')){
$(this).removeClass('btnClose').removeAttr('style');
menuOverlay.stop().animate({opacity:'0'},fadeSpeed,function(){
menuOverlay.removeAttr('style');
});
menuWrap.stop().animate({left:'-' + menuWidth + 'px'},slideSpeed);
$('body').removeAttr('style');
} else {
$(this).addClass('btnClose').css({position:'fixed'}).stop().animate({left:menuWidth + btnLeft},slideSpeed);
menuOverlay.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},fadeSpeed);
menuWrap.stop().animate({left:'0'},slideSpeed);
$('body').css({position:'fixed'});
}
});
}
} else {
$('#menuOverlay,#switchBtnArea,#rwdMenuWrap').remove();
$('body').removeAttr('style');
}
}
$(window).on('resize', function(){
menuSet();
});
menuSet();
});
});
