質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1908閲覧

ハンバーガーメニューを開いていないのに、透明で開いた状態になっているのを解決したいです

wataneko17

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/20 11:07

HTML等、コーディング初心者です。
ハンバーガーメニューを実装したく下記のURLを参考に、なんとか作ることができました。
https://knoweb.net/html-css/css/responsive-hamburgermenu/ ←ふわっと出てくるメニュー

しかしここで問題が、、、
ハンバーガーメニューを開いていないのに、メニューが見えないまま開いている状態になってしまいます。
そのためサイトの背景をクリックしただけでリンク先に飛ぶようになってしまいました。

こちらメニューが開きっぱなしの解決方法ございましたら、ご教授お願いいたします。

html

1<div class="hamburger"> 2 <span></span> 3 <span></span> 4 <span></span> 5 </div> 6 7 <nav class="globalMenuSp"> 8 <ul id="manu" class="menu"> 9 <li><a href="#news">News</a></li> 10 <li><a href="#work">Works</a></li> 11 <li><a href="#about">About</a></li> 12 <li><a href="#access">Access</a></li> 13 <li><a href="#contact">Contact</a></li> 14 </ul> 15 </nav>

CSS

1/* ハンバーガーボタン */ 2 .hamburger { 3 display : block; 4 position: fixed; 5 z-index : 3; 6 right : 13px; 7 top : 12px; 8 width : 42px; 9 height: 42px; 10 cursor: pointer; 11 text-align: center; 12 } 13 .hamburger span { 14 display : block; 15 position: absolute; 16 width : 30px; 17 height : 2px ; 18 left : 6px; 19 background : #555; 20 -webkit-transition: 0.3s ease-in-out; 21 -moz-transition : 0.3s ease-in-out; 22 transition : 0.3s ease-in-out; 23 } 24 .hamburger span:nth-child(1) { 25 top: 10px; 26 } 27 .hamburger span:nth-child(2) { 28 top: 20px; 29 } 30 .hamburger span:nth-child(3) { 31 top: 30px; 32 } 33 34 /* ナビ開いてる時のボタン */ 35 .hamburger.active span:nth-child(1) { 36 top : 16px; 37 left: 6px; 38 background :#fff; 39 -webkit-transform: rotate(-45deg); 40 -moz-transform : rotate(-45deg); 41 transform : rotate(-45deg); 42 } 43 44 .hamburger.active span:nth-child(2), 45 .hamburger.active span:nth-child(3) { 46 top: 16px; 47 background :#fff; 48 -webkit-transform: rotate(45deg); 49 -moz-transform : rotate(45deg); 50 transform : rotate(45deg); 51 } 52 53 nav.globalMenuSp { 54 position: fixed; 55 z-index : 2; 56 top : 0; 57 left : 0; 58 color: #fff; 59 background: rgba(0,0,0,0.7); 60 text-align: center; 61 width: 100%; 62 opacity: 0; 63 transition: opacity .6s ease, visibility .6s ease; 64 } 65 66 nav.globalMenuSp ul { 67 text-align: center; 68 margin: 0 auto; 69 padding: 0; 70 width: 100%; 71 } 72 73 nav.globalMenuSp ul li { 74 text-align: center; 75 list-style-type: none; 76 padding: 0; 77 width: 100%; 78 transition: .4s all; 79 } 80 81 .menu li:first-child{ 82 width: 100%; 83 } 84 85 nav.globalMenuSp ul li:last-child { 86 padding-bottom: 0; 87 } 88 nav.globalMenuSp ul li:hover{ 89 background :#ddd; 90 } 91 92 nav.globalMenuSp ul li a { 93 display: block; 94 color: #fff; 95 padding: 1em 0; 96 text-decoration :none; 97 } 98 99 .menu a:hover::before{ 100 content: none; 101 } 102 103 104 /* このクラスを、jQueryで付与・削除する */ 105 nav.globalMenuSp.active { 106 opacity: 100; 107 108 }

js

1$(function() { 2 $('.hamburger').click(function() { 3 $(this).toggleClass('active'); 4 5 if ($(this).hasClass('active')) { 6 $('.globalMenuSp').addClass('active'); 7 } else { 8 $('.globalMenuSp').removeClass('active'); 9 } 10 }); 11 }); 12 $('#manu a[href]').on('click', function(event) { 13 $('.hamburger').trigger('click'); 14 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

display:none; だとアニメーションが効かないので、width を 0% と 100% で切り替えます。

メニューを開く時はすぐに100%にして、閉じる時は0.6s後に 0% にします。

css

1nav.globalMenuSp { 2 position: fixed; 3 z-index : 2; 4 top : 0; 5 left : 0; 6 color: #fff; 7 background: rgba(0,0,0,0.7); 8 text-align: center; 9 width: 0%; 10 opacity: 0; 11 transition: opacity .6s ease, width 0s .6s; /* 修正 閉じる時のアニメーション */ 12} 13 14 15/* 中略 */ 16 17/* このクラスを、jQueryで付与・削除する */ 18nav.globalMenuSp.active { 19 width: 100%; 20 opacity: 1; 21 transition: opacity 1.6s ease, width 0s; /* 追加 開く時のアニメーション */ 22}

投稿2020/09/20 12:21

編集2020/09/20 12:35
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wataneko17

2020/09/20 13:49

ご回答いただきありがとうございました。 やりたかったことを実現することができ、またとても勉強になりました!
guest

0

やり方は色々ありそうですがcssに下記を追加。

CSS

1nav:not(.active).globalMenuSp 2{ 3 display:none; 4}

投稿2020/09/20 12:11

436

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wataneko17

2020/09/20 13:51

ご回答いただきありがとうございます。 シンプルなものを作るときはこちら使えると思いました。 ぜひ今後の参考にさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問