WEBOPIXEL

jQuery+CSS3で全画面表示するハンバーガーメニュー

Posted: 2019.01.31 / Category: HTML&CSS, javascript 

jQuery+CSS3を使用して、ハンバーガーボタンをクリックすると全画面メニューが表示するやつをやってみます!

Sponsored Link

フェードで表示されるナビゲーション

一つ目はフェードで表示されるナビゲーションです。

See the Pen Full Screen Hamburger Menu 01 by webopixel (@webopixel) on CodePen.

html

<div id="nav-toggle">
	<div>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

<div id="gloval-nav">
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Works</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</div>

#nav-toggleをクリックするとbodyopenクラスを付与するということをjQueryでやってます。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
	$(function () {
		$('#nav-toggle').on('click', function() {
			$('body').toggleClass('open');
		});
	});
})(jQuery);
</script>

CSSは重要なのは#gloval-navの部分ですね。
フェードイン&アウトの動きはopacityvisibilitytransitionさせることで実現できます。

css

#gloval-nav {
	background: #000;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	text-align: center;
	display: flex;
	visibility: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 29px;
	opacity: 0;
	transition: opacity .6s ease, visibility .6s ease;
}
.open #gloval-nav {
	visibility: visible;
	opacity: 1;
}

横からスライドするナビゲーション

2つ目は横からスライドするタイプです。

See the Pen Full Screen Hamburger Menu 02 by webopixel (@webopixel) on CodePen.

横移動なのでtranslateXtransitionするだけですね。

css

#gloval-nav {
	color: #fff;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 29px;
	padding-left: 100px;
	transform: translateX(-100%);
	transition:  transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open #gloval-nav {
	transform: translateX(0);
}

COMMENTS

a.n 2019-06-17 20:52 

拝見させて頂きました。
プログラミング初心者なのですが
script srcのあとのものは何でしょうか?

お時間あるときにコメント下さると嬉しいです。

webOpixel 2019-06-19 13:05 

jQueryというライブラリを使用していますので、
script src の部分で読み込んでます。

YUTA 2020-02-05 07:53 

こちらのハンバーガーメニュー 実装大変勉強になりました。
プログラミングを初めてまだ2ヶ月の新人です。
HTML CSS Bootstrapを簡易的に学習し、jQueryの学習中です。

jQueryも重要なのはさることながら、CSSの記述が一番のハードルになりそうです。
ハンバーガーメニューを作りたくば、こちのCSSに記述されているプロパティを一つ一つ
勉強していけばできますか?
もしくはもっと効率的な学習方法はありますか?
質問の糸が明確ではなくすみません

簡単にいうと、CSSって深いですね!

webOpixel 2020-02-05 10:52 

コメントありがとうございます。

自分も最初はCSSの本を買って、プロパティを一つ一つ試して勉強しました。
とはいっても自分が始めたときはまだ、アニメーションもFlexとかもない時代だったので、
今よりは多くありませんでしたが。
(今は数も増えて大変ですね)

よく使う基本的なプロパティはちゃんとに覚えて、
アニメーションに関してはそれほど使用する頻度は高くないと思いますので、
ひとまずコピペで作るでも良いのかもしれません。

Webは全部やりだしたら大変なので、
最終的な目標をイメージして必要なところだけ
勉強していくのがいいのではないでしょうか!

Masahiro 2020-03-10 14:44 

下にスクロールして行った時に、その場でハンバーガメニューを押した時そこでの画面いっぱいに表示される様にするには同すれば良いですか?
下にスクロールして行って、そこでハンバーガメニューを押すと上のheaderのほうでメニューが表示されてしまい、今自分がみている場所には表示されないということが起きてしまいます。

webOpixel 2020-03-14 11:54 

Fixedしてればスクロールしても関係ないはずです。
ちょっとどのような構造にしているのかわからないのでなんとも言えませんが、
gloval-navを子要素にするとだめかもしれないので一番親に出してみてください。

L 2020-03-26 20:48 

こんにちは。素敵なデザイン、早速使わせていただきました。
無事動いたのですが、ページ内リンクは動きませんでした。
https://wryoku.com/jquerymobile-anchor_null-answer/
も参考にしてみたのですがダメでした。
わからずお手上げです。
もしお時間ありましたら教えていただけると幸いです。

webOpixel 2020-03-30 23:24 

Lさんコメントありがとうございます。
こんな感じで追記してみてください。

$('#gloval-nav a').on('click', function() {
	$('body').toggleClass('open');
	var speed = 800;
	var href= $(this).attr('href');
	var target = $(href == '#' || href == '' ? 'html' : href);
	var position = target.offset().top;
	$('body,html').animate({scrollTop:position}, speed, 'swing');
	return false;
});

M 2020-04-12 18:22 

ナビのメニューをクリック、もしくはメニュー以外をクリックしたときにナビが元に戻る処理は、どのように書くのがスマートでしょうか

webOpixel 2020-04-13 21:14 

2番目のやつだったらBGクリックで閉じるようにすればいいと思います。
ちょっとボタンの部分を変える必要あると思いますが。

$('#nav-bg-wrap').on('click', function() {
$('body').removeClass('open');
});

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。