Q&A
『メニューがヘッダーに被ってしまう』というのは、具体的にはどういう現象でしょうか？
コードを見る限り、メニューはヘッダの中にあるようですが……
js
1// script.js：ハンバーガーボタンを動かす 2 3$(function() { 4 $('.hamburger').click(function(){ 5 $('.hamburger').toggleClass('active'); 6 }); 7});
css
1* { box-sizing: border-box; } 2 3ul, li { 4 padding: 0px; 5 margin: 0px; 6 list-style: none; 7} 8 9 10/* メニュー */ 11nav { 12 background-color: greenyellow; 13} 14 15.menus { 16 display: flex; 17} 18 19.menus li.menu { 20 width: 25%; 21} 22.menus li { 23 list-style: none; 24 background-color: greenyellow; 25} 26 27.menu a { /* 文字色 */ 28 display: block; 29 padding: 25%; 30 text-decoration: none; 31} 32 33.menu a:hover { 34 background: rgba(128, 128, 128, 0.2); /* グレーの薄さ0.2 文字色はそのまま */ 35} 36 37.menu ul { 38 position: absolute; 39 display: none; 40 background-color: greenyellow; /* hover時に表示される子要素の色 */ 41 z-index: 10; 42} 43 44.menus li:hover ul { 45 display: block; /* これがないと、hover時に表示されない */ 46 width: calc(100% / 4); 47}
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="../../monsterlifeserver/include/css/header.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 8 9</head> 10<body> 11 12 <header> 13 <div class="header-wrapper"> 14 15 <div class="title"> 16 <div class="logo"><a href="../../monsterlifeserver/index.html"><img src="../../monsterlifeserver/img/mls_title_logo.png" alt="" width="100%" height="100%" border="0" /></a></div> 17 18 <div class="hamburger"> 19 <span></span> 20 <span></span> 21 <span></span> 22 </div> 23 </div> 24 25 26 <nav> 27 <ul class="menus"> 28 <li class="menu"><a href="../../monsterlifeserver/index.html">ホーム</a></li> 29 <li class="menu"><a href="#">メニュー１</a> 30 <ul> 31 <li><a href="../../monsterlifeserver/top.html">トップページ</a> 32 <li><a href="../../monsterlifeserver/gamelist.html">ミニゲーム一覧</a></li> 33 <li><a href="../../monsterlifeserver/link.html">MLSのSNS情報</a></li> 34 </ul> 35 </li> 36 <li class="menu"><a href="#">メニュー２</a> 37 <ul> 38 <li><a href="../../monsterlifeserver/24hserver.html">２４Hサーバーについて</a></li> 39 <li><a href="../../monsterlifeserver/aboutmlsbot.html">MLSBOTについて</a></li> 40 <li><a href="../../monsterlifeserver/aboutmember.html">会員（スポンサー）制について</a></li> 41 </ul> 42 </li> 43 <li class="menu"><a href="#">メニュー３</a> 44 <ul> 45 <li><a href="../../monsterlifeserver/kihu.html">寄付について</a></li> 46 <li><a href="../../monsterlifeserver/staff.html">スタッフ募集</a></li> 47 <li><a href="../../monsterlifeserver/komaru.html">MLSが困っています</a></li> 48 </ul> 49 </li> 50 </ul> 51 </nav> 52 53 </div> 54 </header> 55 56 <script src="../../monsterlifeserver/include/js/header.js"></script> 57</body> 58</html> 59```ヘッダーを固定してスクロールしても常にヘッダーが見れるようにする方法とヘッダーの幅の変更がわかりません。一度、 60```css 61.menu a { /* 文字色 */ 62 display: block; 63 padding: 25%; 64 text-decoration: none; 65} 66```の部分を 67```css 68.menu a { /* 文字色 */ 69 display: inline; 70 padding: 25%; 71 text-decoration: none; 72} 73```にすることで画像Bのような幅にはできたのですがクリックできる範囲が小さくなりませんでした。また、文字がおかしくなってしまいます。どうするべきでしょうか・・・？ 74 75画像Aは現状です。 76 77画像A 78 79 80画像B 81 82 83# 目標 84 85- ヘッダーの固定 86- メニューの幅とヘッダーの幅を狭くする。 87- 文字が２段などにならず、端から端までを埋めるようになる。 88 89このようなことはできるのでしょうか？ 90 91#追記 92幅を小さくする方法はわかりました。 93```css 94ul, li { 95 padding: 5px; 96 margin: 5px; 97 list-style: none; 98}
これでできたのですが、メニューがヘッダーに被ってしまうようになってしまいました。
当該ページ
http://monster2408.html.xdomain.jp/monsterlifeserver/index.html
#追記２
メニューがヘッダーに被ってしまう
#追記３
ヘッダー（ホーム、メニュー１～３）にメニュー（２４Hサーバーについて、MLSBOTについえ、会員（スポンサー）制について）の背景（緑）であるラベル？部分がかぶらないようにできないのかな？という意味です。
#追記４
css
1* { box-sizing: border-box; } 2 3ul, li { 4 padding: 5px; 5 margin: 5px; 6 list-style: none; 7} 8 9 10/* メニュー */ 11nav { 12 background-color: greenyellow; 13} 14 15.menus { 16 display: flex; 17} 18 19.menus li.menu { 20 width: 25%; 21} 22.menus li { 23 list-style: none; 24 background-color: greenyellow; 25} 26 27.menu a { /* 文字色 */ 28 display: block; 29 padding: 5px; 30 text-decoration: none; 31} 32 33.menu a:hover { 34 background: rgba(128, 128, 128, 0.2); /* グレーの薄さ0.2 文字色はそのまま */ 35} 36 37.menu ul { 38 position: absolute; 39 display: none; 40 background-color: greenyellow; /* hover時に表示される子要素の色 */ 41 z-index: 10; 42 margin-top: 25px; // これを追加 43} 44 45.menus li:hover ul { 46 display: block; /* これがないと、hover時に表示されない */ 47 width: calc(100% / 4); 48} 49 50header#sample { 51 position: fixed; 52 padding: 30px; 53 left: 0; 54 right: 0; 55}
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="../../monsterlifeserver/include/css/header.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 8 9</head> 10<body> 11 12 <header> 13 <div class="header-wrapper"> 14 <div align="center"><a href="https://px.a8.net/svt/ejp?a8mat=35JY3D+CL2W4Y+50+2HH8I9" target="_blank" rel="nofollow"> 15 <img border="0" width="728" height="90" alt="" src="https://www20.a8.net/svt/bgt?aid=190727257761&wid=001&eno=01&mid=s00000000018015029000&mc=1"></a> 16 <img border="0" width="1" height="1" src="https://www15.a8.net/0.gif?a8mat=35JY3D+CL2W4Y+50+2HH8I9" alt=""></div><br><br> 17 18 <header id="sample"> 19 <div class="title"> 20 <div class="logo"><a href="../../monsterlifeserver/index.html"><img src="../../monsterlifeserver/img/mls_title_logo.png" alt="" width="100%" height="100%" border="0" /></a></div> 21 22 <div class="hamburger"> 23 <span></span> 24 <span></span> 25 <span></span> 26 </div> 27 </div> 28 29 30 <nav> 31 <ul class="menus"> 32 <li class="menu"><a href="../../monsterlifeserver/index.html">ホーム</a></li> 33 <li class="menu"><a href="#">メニュー１</a> 34 <ul> 35 <li><a href="../../monsterlifeserver/top.html">トップページ</a> 36 <li><a href="../../monsterlifeserver/gamelist.html">ミニゲーム一覧</a></li> 37 <li><a href="../../monsterlifeserver/link.html">MLSのSNS情報</a></li> 38 </ul> 39 </li> 40 <li class="menu"><a href="#">メニュー２</a> 41 <ul> 42 <li><a href="../../monsterlifeserver/24hserver.html">２４Hサーバーについて</a></li> 43 <li><a href="../../monsterlifeserver/aboutmlsbot.html">MLSBOTについて</a></li> 44 <li><a href="../../monsterlifeserver/aboutmember.html">会員（スポンサー）制について</a></li> 45 </ul> 46 </li> 47 <li class="menu"><a href="#">メニュー３</a> 48 <ul> 49 <li><a href="../../monsterlifeserver/kihu.html">寄付について</a></li> 50 <li><a href="../../monsterlifeserver/staff.html">スタッフ募集</a></li> 51 <li><a href="../../monsterlifeserver/komaru.html">MLSが困っています</a></li> 52 </ul> 53 </li> 54 </ul> 55 </nav> 56 </header> 57 </div> 58 </header> 59 60 <script src="../../monsterlifeserver/include/js/header.js"></script> 61</body> 62</html>
調べたりして試行錯誤もしたのですが、うまくできませんでした。
質問変更拝読。
画像Aと「メニューがヘッダーに被ってしまう」画像との違いがわかりませんでした……
言葉では説明できないような微妙な差なのでしょうか？
あ、
すべての画像がかぶっているのに今気が付きました。
すみません。
えっと、ヘッダー（ホーム、メニュー１～３）にメニュー（２４Hサーバーについて、MLSBOTについえ、会員（スポンサー）制について）の背景（緑）であるラベル？部分がかぶらないようにできないのかな？という意味でした。
わかりずらい質問ですみませんでした。
回答1件
0
ベストアンサー
こういうことでしょうか。
メニューがヘッダーに被ってしまう
css
1.menu ul { 2 position: absolute; 3 display: none; 4 background-color: greenyellow; 5 z-index: 10; 6 margin-top: 25px; // これを追加 7}
ヘッダーを固定してスクロールしても常にヘッダーが見れるようにする
css
1header { 2 position: fixed; 3 padding: 30px; 4 left: 0; 5 right: 0; 6}
投稿2019/07/31 05:37
総合スコア36087
追記しました
全角スペースが入っていますよ。
できました。
ありがとうございました。
あなたの回答
tips
プレビュー
