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

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

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

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

JavaScript

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

jQuery

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

HTML

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

CSS

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

Q&A

2回答

1851閲覧

ハンバーガーメニュー メニュー分コンテンツが下がってしまう…

buuuu_chan

総合スコア13

メニュー

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

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/10/16 17:03

編集2022/01/12 10:55

ハンバーガーメニューを実装しています。
スマホでメニューを開くと、メニュー分コンテンツが下に下がってしまいます。
コンテンツの上にメニューを被せるにはどうしたら良いでしょうか?

(参考サイト)
https://haniwaman.com/responsive-menu/
*お手数ですが、↑サイトで「コンテンツに内容されたパターン」と「浮かせたパターン」をページ内検索して下さい。
(現状)コンテンツに内容されたパターン
(したい事)浮かせたパターン

【補足】header部分でハンバーガーメニューをクリックするとコンテンツが下にいきます。

<div id="container">から下でハンバーガーメニューをクリックすると理想の状態になります。 header部分から”浮かせたパターン”にしたいです。

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

html

1<div class="menu"> 2 <header class="site-header smp"><a href="/"><img src="logo.jpg"></a> 3 <div class="nav_toggle"> 4 <div> <span></span> <span></span> <span></span> </div> 5 </div> 6 </header> 7 <nav class="gnav"> 8 <ul> 9 <li class="logo pc"><a href="/"><img src="logo.jpg"></a></li> 10 <li><a href="#"></a></li> 11 <li class="line2"></li> 12 <li class="line2"></li> 13 <li></li> 14 <li></li> 15 <li></li> 16 </ul> 17 </nav> 18</div> 19<div id="container"> 20 <p class="smp"><img src="images/mainvisual.jpg" alt="" width="100%"></p> 21

Javascript

1//ナビゲーション固定 2$(function() { 3 var $win = $(window), 4 $main = $('main'), 5 $nav = $('.menu'), 6 navHeight = $nav.outerHeight(), 7 navPos = $nav.offset().top, 8 fixedClass = 'is-fixed'; 9 10 $win.on('load scroll', function() { 11 var value = $(this).scrollTop(); 12 if ( value > navPos ) { 13 $nav.addClass(fixedClass); 14 $main.css('margin-top', navHeight); 15 } else { 16 $nav.removeClass(fixedClass); 17 $main.css('margin-top', '0'); 18 } 19 }); 20}); 21 22//メニュー 23$(function(){ 24 $('.nav_toggle').click(function(){ 25 $("header").toggleClass('open'); 26 $(".gnav").slideToggle(500); 27 }); 28$('.gnav a').on('click', function(){ 29 if (window.innerWidth <= 999) { 30 $('.nav_toggle').click(); 31 } 32 }); 33});

css

1/*ナビゲーション*/ 2nav { 3 width:100%; 4 background:#10c1d4; 5 margin-top:-3px; 6 border-top:1px solid #ffffff; 7} 8nav ul { 9 overflow:hidden; 10 width:100%; 11 margin:0 auto; 12} 13nav ul li { 14 padding:30px 10px 10px 10px; 15 color:#ffffff; 16 font-weight:bold; 17 text-align:center; 18 width:100%; 19 height:35px; 20 border-bottom:1px solid #ffffff; 21 line-height:1.5em; 22} 23nav ul li span { 24 font-weight:normal; 25} 26nav ul li.logo { 27 padding:15px 10px 10px 10px; 28 height:50px; 29} 30.is-fixed { 31 position: fixed; 32 top: 0; 33 left: 0; 34 z-index: 2; 35 width: 100%; 36} 37.nav_toggle { 38 display: block; 39 width: 40px; 40 height: 40px; 41 position: absolute; 42 top: 15px; 43 right:10px; 44 z-index: 100; 45 overflow:hidden; 46} 47.nav_toggle div { 48 position: relative; 49} 50.nav_toggle span { 51 display: block; 52 height: 3px; 53 background: #ffffff; 54 position:absolute; 55 width: 100%; 56 left: 0; 57 -webkit-transition: 0.5s ease-in-out; 58 -moz-transition: 0.5s ease-in-out; 59 transition: 0.5s ease-in-out; 60} 61 .nav_toggle span:nth-child(1) { 62 top:0px; 63} 64 .nav_toggle span:nth-child(2) { 65 top:12px; 66} 67 .nav_toggle span:nth-child(3) { 68 top:24px; 69} 70 71 /*開閉ボタンopen時*/ 72 .open .nav_toggle span:nth-child(1) { 73 top: 12px; 74 -webkit-transform: rotate(135deg); 75 -moz-transform: rotate(135deg); 76 transform: rotate(135deg); 77} 78 .open .nav_toggle span:nth-child(2) { 79 width: 0; 80 left: 50%; 81} 82 .open .nav_toggle span:nth-child(3) { 83 top: 12px; 84 -webkit-transform: rotate(-135deg); 85 -moz-transform: rotate(-135deg); 86 transform: rotate(-135deg); 87} 88.gnav{ 89 display:none; 90} 91 92.pc{ 93display:none; 94} 95.smp{ 96display:block; 97}

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

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

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

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

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

yambejp

2019/10/17 01:10 編集

参考ページ拝見しましたが >(現状)コンテンツに内容されたパターン の意味がわかりません。 現状左から縦長のメニューが挿入されてcloseかメニュー選択で 閉じますね?それを「コンテンツに内容されたパターン」と 表現しているのでしょうか? >(したい事)浮かせたパターン これもよくわかりません 他人のサイトでも良いので具体的な最終形を見られる 参考はありませんか?
buuuu_chan

2019/10/17 02:09

ご連絡ありがとうございます。 ↓こちらに載っています。 https://haniwaman.com/responsive-menu/ 「コンテンツに内容されたパターン」と「浮かせたパターン」でページ内検索して頂けると、現状と最終形が載っています。
guest

回答2

0

css

1.gnav{ 2 display:none; 3}

▲ この部分を以下のように修正 ▼

css

1.gnav{ 2 display:none; 3 position: relative; 4} 5.gnav ul { 6 position: absolute; 7 top: 0; 8 left: 0; 9}

これで動くと思いますが^^;

投稿2020/07/01 07:53

-millmill-

総合スコア674

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

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

0

gnavクラスに

CSS

1.gnav { 2 display: none; 3 position: absolute; 4}

で、どうでしょうか

投稿2019/10/17 03:15

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問