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

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ブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

解決済

2回答

1720閲覧

<nav></nav>で囲った範囲がハンバーガーメニューに格納されない。

DoubleJ794

総合スコア19

CSS3

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

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

0クリップ

投稿2020/03/01 07:35

https://nodoame.net/archives/8771 を参考にしてスマホ向け(画面サイズによって指定)の場合、ハンバーガーメニューでタップすれば開くようにしたいのですが、普段は表示されないはずのメニューが表示され、とても見づらくなってしまっています...実際のサイト http://rumiachannel.starfree.jp

HTML

1<header class="menu-ver header"> 2 <ul class="ul"> 3 <li><a href= "#" class="btn4"> サイトTOP </a></li> 4 <li><a href= "youreimu/" class="btn4" class="btn"> 幼霊夢 </a></li> 5 <li><a href= "reireimu/" class="btn4" class="btn"> 霊々夢 </a></li> 6 <li><a href= "game/" class="btn4">ゲーム</a></li> 7 <li><a href= "newshome/" class="btn4">ニュース</a></li> 8 <li><a href= "master/" class="btn4"> 管理人 </a></li> 9 <li><a href= "right/" class="btn4">権利表示</a></li> 10 <li><a href= "suport/" class="btn4">お問い合わせ</a></li> 11 <ul> 12 </header> 13 <nav class="globalMenuSp"> 14 <div class="navToggle"> 15 <span></span><span></span><span></span><span>menu</span> 16 </div> 17 <ul> 18 <li><a href= ""> サイトTOP </a></li> 19 <li><a href= "youreimu/index.html"> 幼霊夢 </a></li> 20 <li><a href= "reireimu/index.html"> 霊々夢 </a></li> 21 <li><a href= "game/index.html">ゲーム</a></li> 22 <li><a href= "newshome/index.html">ニュース</a></li> 23 <li><a href= "master/index.html"> 管理人 </a></li> 24 <li><a href= "right/index.html">権利表示</a></li> 25 <li><a href= "suport/index.php">お問い合わせ</a></li> 26 <ul> 27 </nav>

CSS

1@media screen and (min-width: 300px) { 2 3 .navToggle { 4 margin-top: 60px; 5 } 6 7 nav.globalMenuSp { 8 position: fixed; 9 z-index: 2; 10 top: 0; 11 left: 0; 12 background: #fff; 13 color: #000; 14 text-align: center; 15 transform: translateY(-100%); 16 transition: all 0.6s; 17 width: 100%; 18 } 19 20 nav.globalMenuSp ul { 21 background: #ccc; 22 margin: 0 auto; 23 padding: 0; 24 width: 100%; 25 } 26 27 nav.globalMenuSp ul li { 28 font-size: 1.1em; 29 list-style-type: none; 30 padding: 0; 31 width: 100%; 32 border-bottom: 1px dotted #333; 33 } 34 35 /* 最後はラインを描かない */ 36 nav.globalMenuSp ul li:last-child { 37 padding-bottom: 0; 38 border-bottom: none; 39 } 40 41 nav.globalMenuSp ul li a { 42 display: block; 43 color: #000; 44 padding: 1em 0; 45 } 46 47 /* このクラスを、jQueryで付与・削除する */ 48 nav.globalMenuSp.active { 49 transform: translateY(0%); 50 } 51 52 .navToggle { 53 display: block; 54 position: fixed; /* body??????????? */ 55 right: 13px; 56 top: 12px; 57 width: 42px; 58 height: 51px; 59 cursor: pointer; 60 z-index: 3; 61 background: #666; 62 text-align: center; 63 } 64 65 .navToggle span { 66 display: block; 67 position: absolute; /* .navToggle???? */ 68 width: 30px; 69 border-bottom: solid 3px #eee; 70 -webkit-transition: .35s ease-in-out; 71 -moz-transition: .35s ease-in-out; 72 transition: .35s ease-in-out; 73 left: 6px; 74 } 75 76 .navToggle span:nth-child(1) { 77 top: 9px; 78 } 79 80 .navToggle span:nth-child(2) { 81 top: 18px; 82 } 83 84 .navToggle span:nth-child(3) { 85 top: 27px; 86 } 87 88 .navToggle span:nth-child(4) { 89 border: none; 90 color: #eee; 91 font-size: 9px; 92 font-weight: bold; 93 top: 34px; 94 } 95 96 /* ???span?????45?? */ 97 .navToggle.active span:nth-child(1) { 98 top: 18px; 99 left: 6px; 100 -webkit-transform: rotate(-45deg); 101 -moz-transform: rotate(-45deg); 102 transform: rotate(-45deg); 103 } 104 105 /* 2???3???span?45?? */ 106 .navToggle.active span:nth-child(2), 107 .navToggle.active span:nth-child(3) { 108 top: 18px; 109 -webkit-transform: rotate(45deg); 110 -moz-transform: rotate(45deg); 111 transform: rotate(45deg); 112 } 113 114}

JavaScript

1$(function() { 2 $('.navToggle').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});

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

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

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

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

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

guest

回答2

0

ベストアンサー

ulの閉じタグが入るべき場所が閉じタグになっていません。
<ul></ul>としてください。

追記====
上記で治らなかったということなのでもうちょっとみてみました。
公開されているページを見ると、materialize.min.cssでnavに対してheight: 56px;がかかっているのが原因のようなので、height:auto;などで上書きしてください。
ちなみに、この方法はnav全体を画面外に隠すものなので、うまくいくとハンバーガーボタンも画面から消えると思います。positionの基準となるボックスをbodyにするなどして調整してください。

投稿2020/03/01 07:42

編集2020/03/01 08:30
hwatarig

総合スコア461

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

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

DoubleJ794

2020/03/01 07:53

閉じ忘れていました...ご指摘ありがとうございます!!ただ、閉じても変わりませんでした...
hwatarig

2020/03/01 08:30

回答に追記しました。
DoubleJ794

2020/03/01 08:38

うまくいきました!!ありがとうございます!!
guest

0

解決済みですか、
いちおうサンプル作成したので回答しておきます。

質問のコードの変更をなるべく少なくする方針で作成しました。

下記の2箇所のセレクタに ul を追加するだけです。

css

1/* 前略 */ 2 3/* nav.globalMenuSp { */ 4 nav.globalMenuSp ul { 5 6/* 中略 */ 7 8/* nav.globalMenuSp.active { */ 9 nav.globalMenuSp.active ul { 10

動作確認用Codepenサンプル

投稿2020/03/01 09:00

hatena19

総合スコア33620

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問