[js]スマホサイトで横から表示するハンバーガーメニューを実装する方法

Question

スマホサイトで横から表示するハンバーガーメニューを実装する方法。

現在スマホサイトを作成しておりますが
よくある上から下へ、上下の動きをするハンバーガーメニューではなく
右上から下へ動くメニューを作りたく

jQureyでの実装方法がつかめず質問させて頂きました。

メニューの中身は背景に引いている画像と
その上にテキストリンクを置きたいと思っております。

おそらくイメージつきづらいかと思いますが
slideToggleではなくToggleの動きに近い形をイメージしております。

ただToggleのようにメニューの大きさをいじるのではく
元の大きさの状態で右上からすっとメニューが降りてくるのが理想です。

実装方法ご存知の方いらっしゃいましたら
何卒、ご教授よろしくお願い致します。

現在他の方が作ったjQueryを参考に作っておりますが
その処理だとAndroidでメニューがdisply:noneになってないようで
横幅が大きく右側に開いてしまい
その上部にハンバーガーメニューが見えます。
そしてボタンを押すことができないので処理が動きません。

説明がへたで伝わりづらいかと思いますので
実際のjs（二つ読み込んでいます。）のソースをお送りいたします。

/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {

	var bodyEl = document.body,
		content = document.querySelector( '.content-wrap' ),
		openbtn = document.getElementById( 'open-button' ),
		closebtn = document.getElementById( 'close-button' ),
		isOpen = false;

	function init() {
		initEvents();
	}

	function initEvents() {
		openbtn.addEventListener( 'click', toggleMenu );
		if( closebtn ) {
			closebtn.addEventListener( 'click', toggleMenu );
		}

		// close the menu element if the target it´s not the menu element or one of its descendants..
		content.addEventListener( 'click', function(ev) {
			var target = ev.target;
			if( isOpen && target !== openbtn ) {
				toggleMenu();
			}
		} );
	}

	function toggleMenu() {
		if( isOpen ) {
			classie.remove( bodyEl, 'show-menu' );
		}
		else {
			classie.add( bodyEl, 'show-menu' );
		}
		isOpen = !isOpen;
	}

	init();

})();

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

<div class="menu-wrap clearfix">
<nav class="nav-inner">
<div class="nav_logo"><img src="images/head_nav_tit.gif" alt="" width="100%"></div>
<ul class="nav_list clearfix">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
<button class="close-button" id="close-button">Close</button>
</div>

body{
	overflow-x:hidden;
	
}

.container {
}

.content-wrap {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}



/* Close Button */
.close-button {
	width: 2.5em;
	height: 2.5em;
	position: absolute;
	right: 1em;
	top: 1em;
	overflow: hidden;
	text-indent: 1em;
	border: none;
	background: transparent;
	color: transparent;
}

.close-button::before,
.close-button::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	left: 50%;
	background: #ec0085;
}

.close-button::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.close-button::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* Menu */
.menu-wrap {
	position: absolute;
	z-index: 1001;
	width: 150%;
	height: 100%;
	right:0;
	background-image: url(../images/head_nav_bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: right top;
	padding: 2em;
	-webkit-transform: translate3d(600px,-600px,0);
	transform: translate3d(600px,-600px,0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.nav-inner{
	width:60%;
	float:right;
		
}

.nav-inner .nav_logo { width: 35%; margin: 0 0 0 4%;}
.nav-inner ul.nav_list {}
.nav-inner ul.nav_list li { float: left; width:38%; margin: 10px 0 0 4%; padding: 5.5% 0 5% 7%; background-image: url(../images/head_nav_arr.gif); background-position: left center; background-size: 10%; background-repeat: no-repeat; font-size: 1.2em; line-height: 1; text-align: left;}


/* Shown menu */
.show-menu .menu-wrap {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

Comments

[ikuwow]

ややコードが長いので、コードの部分をMarkdown記法の```で囲む方法でシンタックスハイライトしていただくと助かります。

[eko1789]

ハイライトの方法を知らず、お待たせいたしました。
変更いたしました。

[1000]

html とCSSも提示してくれるとわかるんですが。

[eko1789]

追加いたしました。よろしくお願い致します。

[iciclize]

htmlは全部見せていただきたいです。あと、.content-wrapと#close-buttonが見当たらないようですが…

Answer 1

.content-wrapと#close-buttonが見当たらないようですが…

js、cssに記述はあるが入れ込んでいないid、classもあります。

今回の問題は横にハンバーガーメニューが表示されるということでしたので
いったん落ち着いて、全体をdivで囲い
{ width:100%; position:relative; overflow:hidden;}と指定してやることで
解決することができました。
皆様、ご協力いただきありがとう御座います。

Comments

[iciclize]

解決なされたのですね。でしたらこの質問を解決済にすることでこのトピックを完結させることができますので、よろしくおねがいします。