Skip to content

Instantly share code, notes, and snippets.

@s-hiroshi

s-hiroshi/mobile-hamburger.css

Last active March 28, 2016 01:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save s-hiroshi/c4c8858a893bcd62e2dc to your computer and use it in GitHub Desktop.
Save s-hiroshi/c4c8858a893bcd62e2dc to your computer and use it in GitHub Desktop.
Download ZIP
CSS/JavaScriptでmobileハンバーガーメニューを作成サンプルです。
Raw
mobile-hamburger.css
.menu {
position: relative;
width: 100%;
}
.menu__nav {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
.menu-mobile-switch {
position: absolute;
top: 0.625em;
right: 0.5em;
color: #000;
cursor: pointer;
}
#menu-global-wrapper {
display: none; /* JavaScriptで表示・非表示制御 */
margin: 3.5em 0 0;
padding: 1em;
width: 280px;
background: #eee;
}
.menu-global {
list-style-type: none;
}
.menu-global li {
display: block;
color: #000;
}
.menu-global a {
display: block;
color: #000;
}
.g-nav-close {
padding: 0.5em;
color: #000;
background: #eee;
text-align: right;
cursor: pointer;
}
Raw
mobile-hamburger.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.12.1.min.js"></script>
<script src="style.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="menu">
<div class="menu__nav">
<div class="menu-mobile-switch"><i class="fa fa-2x fa-bars"></i></div>
<div id="menu-global-wrapper">
<ul id="menu-global" class="menu-global">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
<li><a href="#">メニュー6</a></li>
</ul>
<div class="g-nav-close"><i class="fa fa-2x fa-times"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
mobile-hamburger.js
/**
* 767px以下メニュー処理
*
* 767px以下のグローバルメニューの処理を提供します。
*/
jQuery( function ( $ ) {
$( ".menu-mobile-switch" ).on( 'click', function () {
//$( "#menu-global" ).toggle( 400, 'swing', function () {
$( ".g-nav-close" ).css( "display", "block" );
$( "#menu-global-wrapper" ).fadeToggle( 400, 'swing' );
} );
$( ".g-nav-close" ).on( 'click', function () {
$( "#menu-global-wrapper" ).hide();
$( this ).hide();
} )
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment