Last active
March 28, 2016 01:29
-
-
Save s-hiroshi/c4c8858a893bcd62e2dc to your computer and use it in GitHub Desktop.
CSS/JavaScriptでmobileハンバーガーメニューを作成サンプルです。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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