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

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

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

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

HTML

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

Q&A

解決済

1回答

2795閲覧

レスポンシブのハンバーガーメニューについて

buuuu_chan

総合スコア13

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

HTML

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

0グッド

1クリップ

投稿2019/02/08 15:53

編集2019/02/08 16:27

前提・実現したいこと

レスポンシブの動作確認で、パソコン上でのサイズを変更

スマホのナビゲーション操作

画面サイズをPCに

とすると、PCのナビゲーションが消えてしまう。

更新を押せば元通りになります。
スマホのナビゲーションを操作してもPCの画面に変わると、更新を押すことなくMenu01、Menu02が出るようにしたいです。
JQueryを変更すれば良いのか、CSSが問題なのか分かりません。

HTML

1<header class="is-fixed"> 2 <div class="globalMenu"> 3 <!--ナビゲーション--> 4 <p class="logo"><a href="http://zaitakujob.jp/"><img src="images/logo.png" alt="ロゴ"></a></p> 5 <div class="nav_toggle"> 6 <div> <span></span> <span></span> <span></span> </div> 7 </div> 8 <nav> 9 <ul class="gblnv_block"> 10 <li><a href="/work/payroll.html">Menu01</a></li> 11 <li><a href="#ex">Menu02</a></li> 12 <li><a href="#flow">Menu03</a></li> 13 <li><a href="#faq">Menu04</a></li> 14 </ul> 15 </nav> 16 <p class="register"><a href="#"><img src="images/register.png" width="30px"></a></p> 17 </div> 18 </header> 19

CSS

1 2<code>### CSS 3header { 4 width:100%; 5 margin: 0 auto; 6 overflow:hidden; 7 border-bottom:3px solid #f2f2f2; 8 background-color:#ffffff; 9} 10.is-fixed { 11 position: fixed; 12 top: 0; 13 left: 0; 14 z-index: 2; 15 width: 100%; 16} 17.globalMenu { 18 width:100%; 19 margin:0 auto; 20 overflow:hidden; 21 position:relative; 22} 23.logo { 24 padding-top:10px; 25 width:165px; 26} 27.register { 28 float:left; 29 padding:5px 15px 5px 20px; 30 border:#fe8209 1px solid; 31 margin:5px; 32 position:absolute; 33 top:0; 34 right:60px; 35} 36nav { 37 width:100%; 38 margin:0 auto; 39 float:left; 40 display:none; 41} 42nav ul li { 43 margin:5px; 44 padding:20px 0 20px 0; 45 font-size:18px; 46 text-align:center; 47 border-bottom:1px solid #cccccc; 48} 49nav ul li:first-child { 50 border-top:1px solid #cccccc; 51} 52.nav_toggle { 53 display: block; 54 width: 40px; 55 height: 40px; 56 position: absolute; 57 top: 25px; 58 right:10px; 59 z-index: 100; 60 overflow:hidden; 61} 62.nav_toggle div { 63 position: relative; 64} 65.nav_toggle span { 66 display: block; 67 height: 3px; 68 background: #000; 69 position:absolute; 70 width: 100%; 71 left: 0; 72 -webkit-transition: 0.5s ease-in-out; 73 -moz-transition: 0.5s ease-in-out; 74 transition: 0.5s ease-in-out; 75} 76 .nav_toggle span:nth-child(1) { 77 top:0px; 78} 79 .nav_toggle span:nth-child(2) { 80 top:12px; 81} 82 .nav_toggle span:nth-child(3) { 83 top:24px; 84} 85 86 /*開閉ボタンopen時*/ 87 .open .nav_toggle span:nth-child(1) { 88 top: 12px; 89 -webkit-transform: rotate(135deg); 90 -moz-transform: rotate(135deg); 91 transform: rotate(135deg); 92} 93 .open .nav_toggle span:nth-child(2) { 94 width: 0; 95 left: 50%; 96} 97 .open .nav_toggle span:nth-child(3) { 98 top: 12px; 99 -webkit-transform: rotate(-135deg); 100 -moz-transform: rotate(-135deg); 101 transform: rotate(-135deg); 102} 103@media screen and (min-width:980px) { 104.is-fixed { 105 position: fixed; 106 top: 0; 107 left: 0; 108 z-index: 2; 109 width: 100%; 110} 111.globalMenu { 112 width:980px; 113 margin:0 auto; 114 overflow:hidden; 115} 116.logo { 117 float:left; 118 padding-top:10px; 119} 120.register { 121 float:left; 122 padding:5px 15px 5px 20px; 123 border:#fe8209 1px solid; 124 margin:5px; 125} 126nav { 127 width:720px; 128 margin:0 auto; 129 float:left; 130 display:block; 131} 132nav ul{ 133 width:720px; 134} 135nav ul li { 136 float:left; 137 margin:5px; 138 padding:35px 22px 5px 22px; 139 font-size:18px; 140 border:none; 141} 142nav ul li:first-child { 143 border:none; 144} 145.nav_toggle span { 146display:none; 147} 148} 149

JQuery

1 2$(function(){ 3$('.nav_toggle').click(function(){ 4$("header").toggleClass('open'); 5$("nav").slideToggle(500); 6}); 7$('nav a').on('click', function(){ 8 if (window.innerWidth <= 768) { 9 $('.nav_toggle').click(); 10 } 11 }); 12}); 13

ご教示よろしくお願い致します。

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

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

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

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

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

kei344

2019/02/08 15:55

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kei344

2019/02/08 16:21

「<code>」を書いてどうする。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
buuuu_chan

2019/02/08 16:29

操作に慣れていなくて、申し訳ありませんでした。修正しました。よろしくお願いいたします。
guest

回答1

0

ベストアンサー

$("nav").slideToggle(500); で閉じるとnavdisplay: none;が付与されるので、CSSかJavaScriptのリサイズイベントで対処する必要があります。

CSS

1@media screen and (min-width:768px) { 2 nav { 3 display: block !important; 4 } 5} /* 例 */ 6```**動くサンプル:**[https://jsfiddle.net/f09mqrpx/](https://jsfiddle.net/f09mqrpx/)

投稿2019/02/08 16:36

編集2019/02/08 16:39
kei344

総合スコア69364

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

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

buuuu_chan

2019/02/08 16:53

ご解答ありがとうございます。 さっそく入れてみました。 今度はスマホのメニューが開きっぱなしになってしまいました。
buuuu_chan

2019/02/08 16:55

すいません!できていました。
buuuu_chan

2019/02/08 16:56

ありがとうございました!大変助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問