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

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

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

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

jQuery

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

CSS

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

受付中

ヘッダーメニューがおかしなことになります。

削除済ユーザー
削除済ユーザー

総合スコア0

HTML5

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

jQuery

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

CSS

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

0回答

0評価

0クリップ

865閲覧

投稿2018/11/16 06:08

レスポンシブヘッダーメニューで、スマホのメニュー開いた後にドラッグして、PCサイズに拡大するとPCのメニュー幅が変わってしまいます。また、スマッホのメニューを開いたままPCサイズに拡大すると灰色になってしまいます。

$('#contents').prepend('<div class="overlay"></div>'); $('.button').click(function() { $('header').toggleClass('navOpen'); $('#wrap').toggleClass('fixed'); $('.overlay').toggle(); var headerH = $('header').outerHeight(); if ($('header').hasClass('navOpen')) { $('header nav').css('marginTop', headerH + 'px'); } }); $('.overlay').click(function() { $(this).fadeOut(300); $('header').removeClass('navOpen'); $('#wrap').removeClass('fixed'); }); コード

html,

margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;/*vertical-align: baseline;*/ } body { margin-right: auto; margin-left: auto; font-size: 13px; box-sizing: border-box;/*RWDでは必須。計算方法を変える*/ } img { vertical-align: center; border: none; width: 100%;/*RWDでは必須指定*/ height: auto; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /*.clearfix { *zoom: 1; }*/ .fixed { top: 0; left: 0; width: 100%; } .overlay { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background: #666666; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; z-index: 999; } /*ヘッダーの色太さと色指定*/ header { position: fixed; top: 0; left: 0; width: 100%; background: #000000; box-shadow: 0 0 3px rgba(0, 0, 0, .2); z-index: 9999; -webkit-user-select: none; -moz-user-select: none; user-select: none; } header .inner { position: relative; max-width: 1400px; width: 95%; margin: 0 auto; padding: 0.5em 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header h1 { float: left; width: 30%; margin-top: 10px; margin-bottom: 10px; font-size: 40px; font-weight: bold; color: #FFFFFF; } header nav { float: left; width: 70%; } header.navOpen nav { opacity: 1; right: 0; } header nav ul { width: 100%; padding: 0 0 0 0px; margin-top: 12px; } header nav ul li { float: left; list-style-type: none; margin-right: 20px; margin-bottom: 10px; } position: relative; display: block; padding: 0.5em; font-size: 20px; text-decoration: none; color: #FFFFFF; } header nav ul li a:hover { color: #FF00AB; } header .button { display: none; width: 30px; position: absolute; top: 20px; right: 15px; cursor: pointer; } header .button span { display: block; height: 4px; width: 100%; background: #FFFFFF; border-radius: 2px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } header .button span:nth-of-type(2), header .button span:nth-of-type(3) { margin-top: 5px; } header.navOpen .button span:nth-of-type(1) { -webkit-transform: translateY(9px) translateX(0) rotate(45deg); -ms-transform: translateY(9px) translateX(0) rotate(45deg); transform: translateY(9px) translateX(0) rotate(45deg); } header.navOpen .button span:nth-of-type(2) { margin-top: 5px; opacity: 0; -webkit-transform: translateY(9px); -ms-transform: translateY(9px); transform: translateY(9px); } header.navOpen .button span:nth-of-type(3) { -webkit-transform: translateY(-9px) translateX(0) rotate(-45deg); -ms-transform: translateY(-9px) translateX(0) rotate(-45deg); transform: translateY(-9px) translateX(0) rotate(-45deg); } @media screen and (max-width:680px) { header h1 { width: auto; margin-top: 0; } header .button { display: block; } header nav { overflow: auto; position: fixed; top: 0; right: -70%; float: none; width: 45%; max-width: 680px; height: 100%; background: #000000; opacity: 0; z-index: 9999; } header nav ul li { float: none; width: auto; }}コード
<div class="inner"> <a href="Index.html"><h1>LOGO</h1> </a> <p class="button"> <span></span> <span></span> <span></span> </p> <!--<nav role="navigation" style="margin-top: 93px;">--> <nav role="navigation"> <!--<ul class="clearfix">--> <ul id="nav"> <li><a href="Newspage.html">ニュース</a></li> <li><a href="#">キャストスタッフ</a></li> <li><a href="Intorodaction.html">紹介</a></li> <li><a href="Story.html">あらすじ</a></li> <li><a href="#">登場人物</a></li> <li><a href="#">劇場情報</a></li> </ul> </nav> </div> </header> コード

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

jQuery

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

CSS

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