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

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

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

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

HTML5

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

jQuery

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

Q&A

解決済

1回答

1989閲覧

ヘッダーのドロップダウンメニューを開くとフッター以下が押し動かされてしまう

ma-sa

総合スコア10

CSS3

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

HTML5

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

jQuery

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

0グッド

0クリップ

投稿2019/05/20 02:41

編集2019/05/20 03:56

前提・実現したいこと

ヘッダーのドロップダウンメニュー(以下メニュー)をレスポンシブデザインで作成しています。
メニューのみは実装できましたが、メニューを開くとメニュー以下が押し動かされてしまいます。
メニューを開いてもデザインがズレない状態にするにはどのように実装したらよいのでしょうか?

下記が現在の状況です。
現在の状況
下記が希望する実装状態です。
希望する実装状態

下記がスマホ画面の現在の状況です。
現在の状況
下記がスマホ画面の希望する実装状態です。
希望する実装状態
希望する実装状態
※画像はPCブラウザ画面ですが、レスポンシブデザインなのでスマホ画面でも同様な状態です。

発生している問題・エラーメッセージ

メニューを開くとヘッダーより下のデザイン(画像赤の部分[class名:main-img])がヘッダーに押し動かされる形で下方にズレてしまいます。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 5 <meta charset="utf-8"> 6 <title></title> 7 <link rel="stylesheet" href="css/styles_sample.css"> 8 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 9</head> 10<body> 11<div class="wrapper"> 12 <header> 13 <div class="header-wrapper"> 14 <div class="topbar"> 15 <div class="topbar-innner"> 16 <div class="site-branding"> 17 <h1 class="site-title"> 18 <a href="#" title=""> 19 <img src="#" alt="logo"> 20 </a> 21 </h1> 22 </div> 23 <div class="site-message"> 24 <p>texttexttexttext</p> 25 </div> 26 </div> 27 </div> 28 <div class="navbar"> 29 <div class="navbar-innner"> 30 <nav class="global-nav"> 31 <ul class="nav"> 32 <li class="nav-category"><a href="">nav01</a> 33 <ul class="nav-container"> 34 <li class="nav-contant"><a href="">list01</a></li> 35 <li class="nav-contant"><a href="">list02</a></li> 36 <li class="nav-contant"><a href="">list03</a></li> 37 </ul> 38 </li> 39 <li class="nav-category"><a href="" class="">nav02</a> 40 <ul class="nav-container"> 41 <li class="nav-contant"><a href="">list01</a></li> 42 <li class="nav-contant"><a href="">list02</a></li> 43 <li class="nav-contant"><a href="">list03</a></li> 44 </ul> 45 </li> 46 <li class="nav-category"><a href="" class="">nav03</a> 47 <ul class="nav-container"> 48 <li class="nav-contant"><a href="">list01</a></li> 49 <li class="nav-contant"><a href="">list02</a></li> 50 <li class="nav-contant"><a href="">list03</a></li> 51 </ul> 52 </li> 53 <li class="nav-category"><a href="" class="">nav04</a> 54 <ul class="nav-container"> 55 <li class="nav-contant"><a href="">list01</a></li> 56 <li class="nav-contant"><a href="">list02</a></li> 57 <li class="nav-contant"><a href="">list03</a></li> 58 </ul> 59 </li> 60 <li class="nav-category"><a href="" class="">nav05</a> 61 <ul class="nav-container"> 62 <li class="nav-contant"><a href="">list01</a></li> 63 <li class="nav-contant"><a href="">list02</a></li> 64 <li class="nav-contant"><a href="">list03</a></li> 65 </ul> 66 </li> 67 </ul> 68 </nav> 69 </div> 70 </div> 71 </div> 72 </header> 73 <div class="main"> 74 <div class="container"> 75 <div class="main-img"> 76 </div> 77 </div> 78 </div> 79</div> 80<script type="text/javascript" src="js/menu.js"></script> 81</body> 82</html>

CSS

1* { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 box-sizing: border-box; 6 color: #333; 7} 8a { 9 text-decoration: none; 10} 11html, 12body, 13.wrapper { 14 height: 100%; 15} 16.header-wrapper { 17 top: 0px; 18 z-index: 3; 19} 20.topbar { 21 float: left; 22} 23.site-branding { 24 display: inline-block; 25} 26.site-message { 27 display: inline-block; 28} 29.global-nav { 30 width: 100%; 31} 32.nav-category { 33 width: 100%; 34} 35.nav-category > a { 36 display: block; 37 width: 100%; 38 padding: 10px 0; 39 border-bottom: 1px solid #ccc; 40 background-color: #fff; 41 color: #000; 42 text-align: center; 43} 44.nav-category:first-child > a { 45 border-top: 1px solid #ccc; 46} 47.nav-container { 48 display: none; 49 position: relative; 50 51 z-index:1 !important; 52} 53.nav-contant { 54 position: relative; 55 z-index: 99; 56} 57.nav-contant > a{ 58 z-index: 99; 59 position: relative; 60 display: block; 61 width: 100%; 62 padding: 10px 5%; 63 border-bottom: 1px solid #ccc; 64 background-color: #111; 65 color: #fff; 66} 67.nav-category > a:hover, 68.nav-contant > a:hover { 69 background-color: #aaa; 70} 71 72/*ハンバーガーメニューアイコン*/ 73.menu-hb { 74 height:100%; 75 text-align: right; 76 padding-right: 20px; 77} 78.menu-trigger, 79.menu-trigger span { 80 display: inline-block; 81 transition: all .4s; 82 box-sizing: border-box; 83} 84.menu-trigger { 85 position: relative; 86 top:10px; 87 width: 40px; 88 height: 30px; 89 padding-right: 5px; 90 cursor: pointer; 91} 92.menu-trigger span { 93 position: absolute; 94 left: 0; 95 width: 100%; 96 height: 4px; 97 background-color: #000; 98 border-radius: 4px; 99} 100.menu-trigger span:nth-of-type(1) { 101 top: 0; 102} 103.menu-trigger span:nth-of-type(2) { 104 top: 13px; 105} 106.menu-trigger span:nth-of-type(3) { 107 bottom: 0; 108} 109#menu01:not(.active):hover span:nth-of-type(1) { 110 top: 2px; 111} 112#menu01:not(.active):hover span:nth-of-type(3) { 113 bottom: 2px; 114} 115#menu01.active span:nth-of-type(1) { 116 -webkit-transform: translateY(13.5px) rotate(-315deg) scale(.8); 117 transform: translateY(13.5px) rotate(-315deg) scale(.8); 118} 119#menu01.active span:nth-of-type(2) { 120 top: 50%; 121 left: 50%; 122 width: 40px; 123 height: 40px; 124 background-color: transparent; 125 border: 3px solid #000; 126 border-radius: 50%; 127 -webkit-transform: translate3d(-50%, -50%, 0); 128 transform: translate3d(-50%, -50%, 0); 129} 130#menu01.active span:nth-of-type(3) { 131 -webkit-transform: translateY(-13.5px) rotate(315deg) scale(.8); 132 transform: translateY(-13.5px) rotate(315deg) scale(.8); 133} 134.main-img { 135 width: 100%; 136 height: 500px; 137 background: red; 138 position: relative; 139 z-index: 0 !important; 140} 141 142 143@media screen and (min-width: 700px) { 144 145 .header-wrapper { 146 margin: 0 10%; 147 } 148 .topbar { 149 width: 300px; 150 } 151 .global-nav { 152 width: 960px; 153 margin-left: auto; 154 font-size: 0; 155 } 156 .nav-category { 157 display: inline-block; 158 width: calc(100% / 5); 159 font-size: 1rem; 160 vertical-align: top; 161 } 162 163 .nav-category > a { 164 border: none; 165 border-left: 1px solid #ccc; 166 } 167 .nav-category:first-child > a { 168 border-top: none; 169 } 170 171 .nav-category:last-child > a { 172 border-top: none; 173 border-right: 1px solid #ccc; 174 } 175}

jQuwry

1$('.navbar').before('<div class="toggle"><div class="menu-hb"><div href="#" class="menu-trigger" id="menu01"><span></span><span></span><span></span></div></div></div>'); 2$('.toggle').css({ 3 'height':'50px', 4 'color':'#fff', 5 'line-height':'50px' 6}); 7 8$(window).on('load resize',function(){ 9 var winWidth = $(window).width(); 10 if(winWidth < 700){ 11 $('.toggle').show(); 12 $('.nav').hide(); 13 } else{ 14 $('.toggle').hide(); 15 $('.nav').show(); 16 } 17}); 18$('.menu-trigger').on('click',function(){ 19 $/*(this).next('ul').slideToggle();*/ 20 $('.nav').slideToggle(); 21 $('.open').removeClass('open'); 22 $('.nav-category>a').next('.nav-container').slideUp(); 23 operner = close; 24}); 25 26 27var opener = close; 28$('.nav-category>a').on('click',function(){ 29 var winWidth = $(window).width(); 30 if(winWidth < 700){ 31 if($(this).hasClass('open')){ 32 $(this).removeClass('open'); 33 $(this).next('.nav-container').slideUp(); 34 opener = close; 35 } else{ 36 var timer; 37 console.log(opener); 38 if(opener !== close){ 39 timer = 500; 40 }else{ 41 timer = 0; 42 } 43 $('.open').removeClass('open'); 44 $('.nav-category>a').next('.nav-container').slideUp(); 45 setTimeout(()=>{ 46 $(this).addClass('open'); 47 $(this).next('.nav-container').slideDown(); 48 },timer); 49 opener = open; 50 } 51 event.preventDefault(); 52 }else{ 53 return false; 54 } 55}); 56 57 58 59$('.nav-category').on('mouseover',function(){ 60 var winWidth = $(window).width(); 61 if(winWidth > 700){ 62 if(!$(this).children('a').hasClass('open')){ 63 $(this).children('a').addClass('open'); 64 $(this).children('.nav-container').stop().slideDown(); 65 } 66 }else{ 67 return false; 68 } 69}).on('mouseout',function(){ 70 var winWidth = $(window).width(); 71 if(winWidth > 700){ 72 $(this).children('a').removeClass('open'); 73 $(this).children('.nav-container').stop().slideUp(); 74 }else{ 75 return false; 76 } 77}); 78$('.nav-category>a').on('click',function(){ 79 event.preventDefault(); 80}); 81 82 83$(function() { 84 $('.menu-trigger').on('click', function() { 85 $(this).toggleClass('active'); 86 return false; 87 }); 88});

試したこと

nav-contantおよびnav-contant > aに対してのz-indexの指定(position: relative指定)

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

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

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

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

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

Lhankor_Mhy

2019/05/20 02:55

フッターではなくてヘッダーでは。
ma-sa

2019/05/20 03:11

ご指摘ありがとうございます。 修正いたしました。
guest

回答1

0

ベストアンサー

nav-container クラスが付与された要素を絶対位置指定要素にすることで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。

CSS

1* { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 box-sizing: border-box; 6 color: #333; 7} 8a { 9 text-decoration: none; 10} 11html, 12body, 13.wrapper { 14 height: 100%; 15} 16.header-wrapper { 17 top: 0px; 18 z-index: 3; 19} 20.topbar { 21 float: left; 22} 23.site-branding { 24 display: inline-block; 25} 26.site-message { 27 display: inline-block; 28} 29.global-nav { 30 width: 100%; 31} 32.nav-category { 33 width: 100%; 34 position: relative; /* 追加 */ 35} 36.nav-category > a { 37 display: block; 38 width: 100%; 39 padding: 10px 0; 40 border-bottom: 1px solid #ccc; 41 background-color: #fff; 42 color: #000; 43 text-align: center; 44} 45.nav-category:first-child > a { 46 border-top: 1px solid #ccc; 47} 48.nav-container { 49 display: none; 50 position: absolute; /* 変更 */ 51 width: 100%; /* 追加 */ 52 z-index:1 !important; 53} 54.nav-contant { 55 position: relative; 56 z-index: 99; 57} 58.nav-contant > a{ 59 z-index: 99; 60 position: relative; 61 display: block; 62 width: 100%; 63 padding: 10px 5%; 64 border-bottom: 1px solid #ccc; 65 background-color: #111; 66 color: #fff; 67} 68.nav-category > a:hover, 69.nav-contant > a:hover { 70 background-color: #aaa; 71} 72 73/*ハンバーガーメニューアイコン*/ 74.menu-hb { 75 height:100%; 76 text-align: right; 77 padding-right: 20px; 78} 79.menu-trigger, 80.menu-trigger span { 81 display: inline-block; 82 transition: all .4s; 83 box-sizing: border-box; 84} 85.menu-trigger { 86 position: relative; 87 top:10px; 88 width: 40px; 89 height: 30px; 90 padding-right: 5px; 91 cursor: pointer; 92} 93.menu-trigger span { 94 position: absolute; 95 left: 0; 96 width: 100%; 97 height: 4px; 98 background-color: #000; 99 border-radius: 4px; 100} 101.menu-trigger span:nth-of-type(1) { 102 top: 0; 103} 104.menu-trigger span:nth-of-type(2) { 105 top: 13px; 106} 107.menu-trigger span:nth-of-type(3) { 108 bottom: 0; 109} 110#menu01:not(.active):hover span:nth-of-type(1) { 111 top: 2px; 112} 113#menu01:not(.active):hover span:nth-of-type(3) { 114 bottom: 2px; 115} 116#menu01.active span:nth-of-type(1) { 117 -webkit-transform: translateY(13.5px) rotate(-315deg) scale(.8); 118 transform: translateY(13.5px) rotate(-315deg) scale(.8); 119} 120#menu01.active span:nth-of-type(2) { 121 top: 50%; 122 left: 50%; 123 width: 40px; 124 height: 40px; 125 background-color: transparent; 126 border: 3px solid #000; 127 border-radius: 50%; 128 -webkit-transform: translate3d(-50%, -50%, 0); 129 transform: translate3d(-50%, -50%, 0); 130} 131#menu01.active span:nth-of-type(3) { 132 -webkit-transform: translateY(-13.5px) rotate(315deg) scale(.8); 133 transform: translateY(-13.5px) rotate(315deg) scale(.8); 134} 135.main-img { 136 width: 100%; 137 height: 500px; 138 background: red; 139 position: relative; 140 z-index: 0 !important; 141} 142 143 144@media screen and (min-width: 700px) { 145 146 .header-wrapper { 147 margin: 0 10%; 148 } 149 .topbar { 150 width: 300px; 151 } 152 .global-nav { 153 width: 960px; 154 margin-left: auto; 155 font-size: 0; 156 } 157 .nav-category { 158 display: inline-block; 159 width: calc(100% / 5); 160 font-size: 1rem; 161 vertical-align: top; 162 } 163 164 .nav-category > a { 165 border: none; 166 border-left: 1px solid #ccc; 167 } 168 .nav-category:first-child > a { 169 border-top: none; 170 } 171 172 .nav-category:last-child > a { 173 border-top: none; 174 border-right: 1px solid #ccc; 175 } 176}

追記
以下のようにすることで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。

CSS

1* { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 box-sizing: border-box; 6 color: #333; 7} 8 9a { 10 text-decoration: none; 11} 12 13html, 14body, 15.wrapper { 16 height: 100%; 17} 18 19.header-wrapper { 20 top: 0px; 21 z-index: 3; 22} 23 24.topbar { 25 float: left; 26} 27 28.site-branding { 29 display: inline-block; 30} 31 32.site-message { 33 display: inline-block; 34} 35 36.global-nav { 37 width: 100%; 38} 39 40.nav-category { 41 width: 100%; 42 position: relative; /* 追加 */ 43} 44 45.nav-category > a { 46 display: block; 47 width: 100%; 48 padding: 10px 0; 49 border-bottom: 1px solid #ccc; 50 background-color: #fff; 51 color: #000; 52 text-align: center; 53} 54 55.nav-category:first-child > a { 56 border-top: 1px solid #ccc; 57} 58 59.nav-container { 60 display: none; 61 position: absolute; /* 変更 */ 62 width: 100%; /* 追加 */ 63 z-index:1 !important; 64} 65 66.nav-contant { 67 position: relative; 68 z-index: 99; 69} 70 71.nav-contant > a{ 72 z-index: 99; 73 position: relative; 74 display: block; 75 width: 100%; 76 padding: 10px 5%; 77 border-bottom: 1px solid #ccc; 78 background-color: #111; 79 color: #fff; 80} 81 82.nav-category > a:hover, 83.nav-contant > a:hover { 84 background-color: #aaa; 85} 86 87.menu-hb { 88 height:100%; 89 text-align: right; 90 padding-right: 20px; 91} 92 93.menu-trigger, 94.menu-trigger span { 95 display: inline-block; 96 transition: all .4s; 97 box-sizing: border-box; 98} 99 100.menu-trigger { 101 position: relative; 102 top:10px; 103 width: 40px; 104 height: 30px; 105 padding-right: 5px; 106 cursor: pointer; 107} 108 109.menu-trigger span { 110 position: absolute; 111 left: 0; 112 width: 100%; 113 height: 4px; 114 background-color: #000; 115 border-radius: 4px; 116} 117 118.menu-trigger span:nth-of-type(1) { 119 top: 0; 120} 121 122.menu-trigger span:nth-of-type(2) { 123 top: 13px; 124} 125 126.menu-trigger span:nth-of-type(3) { 127 bottom: 0; 128} 129 130#menu01:not(.active):hover span:nth-of-type(1) { 131 top: 2px; 132} 133 134#menu01:not(.active):hover span:nth-of-type(3) { 135 bottom: 2px; 136} 137 138#menu01.active span:nth-of-type(1) { 139 -webkit-transform: translateY(13.5px) rotate(-315deg) scale(.8); 140 transform: translateY(13.5px) rotate(-315deg) scale(.8); 141} 142 143#menu01.active span:nth-of-type(2) { 144 top: 50%; 145 left: 50%; 146 width: 40px; 147 height: 40px; 148 background-color: transparent; 149 border: 3px solid #000; 150 border-radius: 50%; 151 -webkit-transform: translate3d(-50%, -50%, 0); 152 transform: translate3d(-50%, -50%, 0); 153} 154 155#menu01.active span:nth-of-type(3) { 156 -webkit-transform: translateY(-13.5px) rotate(315deg) scale(.8); 157 transform: translateY(-13.5px) rotate(315deg) scale(.8); 158} 159 160.main-img { 161 width: 100%; 162 height: 500px; 163 background: red; 164 position: relative; 165 z-index: 0 !important; 166} 167 168.navbar { /* 追加 */ 169 position: relative; 170} 171 172.navbar-innner{ /* 追加 */ 173 position: absolute; 174 width: 100%; 175 z-index: 1; 176} 177 178@media screen and (min-width: 700px) { 179 .header-wrapper { 180 margin: 0 10%; 181 } 182 183 .topbar { 184 width: 300px; 185 } 186 187 .global-nav { 188 width: 960px; 189 margin-left: auto; 190 font-size: 0; 191 } 192 193 .nav-category { 194 display: inline-block; 195 width: calc(100% / 5); 196 font-size: 1rem; 197 vertical-align: top; 198 } 199 200 .nav-category > a { 201 border: none; 202 border-left: 1px solid #ccc; 203 } 204 205 .nav-category:first-child > a { 206 border-top: none; 207 } 208 209 .nav-category:last-child > a { 210 border-top: none; 211 border-right: 1px solid #ccc; 212 } 213 214 .navbar-innner{ /* 追加 */ 215 position :static; 216 } 217}

投稿2019/05/20 02:55

編集2019/05/20 03:36
s8_chu

総合スコア14731

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

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

ma-sa

2019/05/20 03:19

早々のご回答ありがとうございます。 PCブラウザでの表示はご指摘いただいた記述で修正できました。 ですが、レスポンシブ対応で作成しておりますので、 スマホ画面ですと別の実装が必要なようです。 スマホ画面の実装方法をご教示いただけますと幸いです。 よろしくお願いいたします。
ma-sa

2019/05/20 03:20

参考画像を追加いたしました。 PC画面と違い分かりづらいですが、ご参考になりましたら幸いです。
s8_chu

2019/05/20 03:36

追記したので、確認お願いします。
ma-sa

2019/05/20 04:01

ご回答ありがとうございます。 ほぼ理想通りの挙動をしております。 元ソースを動かしていただくとわかるかと思うのですが、 希望としましては追加した画像のような動作をして実装したいと考えております。 ここまでご教示いただいてまたお手間おかけしますが、追加画像のような挙動の実装は可能でしょうか? よろしくお願いいたします。
s8_chu

2019/05/20 04:10

当初の実現したいことである「メニューを開くとメニュー以下が押し動かされてしまう」から離れている内容ですので、別質問として投稿していただけませんか?
ma-sa

2019/05/20 04:11

承知いたしました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問