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
をクリックするとbody
にopen
クラスを付与するということを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
の部分ですね。
フェードイン&アウトの動きはopacity
とvisibility
をtransition
させることで実現できます。
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.
横移動なのでtranslateX
をtransition
するだけですね。
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さんコメントありがとうございます。
こんな感じで追記してみてください。
M 2020-04-12 18:22
ナビのメニューをクリック、もしくはメニュー以外をクリックしたときにナビが元に戻る処理は、どのように書くのがスマートでしょうか
webOpixel 2020-04-13 21:14
2番目のやつだったらBGクリックで閉じるようにすればいいと思います。
ちょっとボタンの部分を変える必要あると思いますが。
S 2020-09-03 17:07
ダウンロードの場合の記述を教えてほしいです。
webOpixel 2020-09-04 23:13
ダウンロードの場合とはどういうことでしょうか?
H 2020-10-21 16:02
こちらのコードが良かったので使わせて頂いています。一つお伺いしたいのですがこちらのハンバーガーメニューのボタンをずっと表示させてい他のですが、レスポンシブ の境界を超えたときにボタンが反応しなくなってしまいます。ブレイクポイントを設定しないといくら縮めても反応するのですが、どういった原因が考えられるでしょうか?お忙しいところ失礼しました。
webOpixel 2020-11-01 11:48
サンプルをそのまま動かしている状態でしょうか?
何かに組み込んでいる場合は今の情報だけだと、なかなか判断が難しいですね。
HK 2021-07-22 01:51
コメント失礼致します。
上記で「L」さんがおっしゃっていた件について、私も同じ考えでした。
「ページ内リンクは動きませんでした。」とありますが、
おそらく移動はしているけれど×を押さないと確認ができないからだと思います。
理想はリンクを押した時にメニューが閉じる仕様かと思いますので、
下記に変更すればページ内リンクでも違和感なく使えると思います。
(function($) {
$(function () {
$(‘#nav-toggle’).on(‘click’, function() {
$(‘body’).toggleClass(‘open’);
});
$(‘nav’).on(‘click’, function() {
$(‘body’).removeClass(‘open’);
});
});
})(jQuery);
必要に応じて「nav」の部分はidやclassに変更してもいいと思います。