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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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

解決済

3回答

1450閲覧

余白のあるドロップダウンメニュー

balls

総合スコア40

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クリップ

投稿2018/08/24 07:53

ハンバーガーメニューをクリックすると、ドロップダウンメニューが表示し、下層メニューのあるメニューをマウスオーバーすると下層メニューを表示する仕様です。

上層メニューと下層メニューとの間に10pxほどの余白を入れなければいけないのですが、そうすると、下層メニューへマウスを移動する際に下層メニューが消えてしまいます。
余白があっても表示させておくにはどうしたらよいでしょうか?
CSS、jQueryどちらを使っても大丈夫ですのでよろしくお願いいたします。

HTML

1<a class="menu-btn" href="#"> 2 <div class="burgar"> 3 <span></span> 4 <span></span> 5 <span></span> 6 </div> 7 <p>MENU</p> 8 <ul class="menu-second-level"> 9 <li>AAAAA 10 <ul class="menu-third-level"> 11 <li>BBBBB 12 <ul class="menu-forth-level"> 13 <li>CCCCC</li> 14 <li>CCCCC</li> 15 <li>CCCCC</li> 16 <li>CCCCC</li> 17 </ul> 18 </li> 19 </ul> 20 </li> 21 </ul> 22</a>

SCSS

1.menu-area { 2 @include clearfix; 3 .menu-btn { 4 display: block; 5 color:#fff; 6 text-align: center; 7 text-decoration: none; 8 background-color: #0caac6; 9 width:78px; 10 height:78px; 11 padding:16px 0 0; 12 @include border-radius(50%); 13 position: relative; 14 z-index: 10; 15 .burgar{ 16 width:33px; 17 height: 26px; 18 position: relative; 19 margin:0 auto; 20 span { 21 position: absolute; 22 left:0; 23 right:0; 24 height: 4px; 25 background-color: #fff; 26 &:nth-child(1) { 27 top:0; 28 } 29 &:nth-child(2) { 30 top:50%; 31 margin-top:-2px; 32 } 33 &:nth-child(3) { 34 bottom:0; 35 } 36 } 37 } 38 p { 39 font-size:12px; 40 padding-top:10px; 41 } 42 position:relative; 43 44 ul { 45 width:165px; 46 background-color:#eee; 47 margin-right:10px; 48 @include border-radius(5px); 49 li { 50 text-align: left; 51 color:#000; 52 font-size:14px; 53 padding:10px; 54 } 55 } 56 .menu-second-level { 57 position: absolute; 58 top:100px; 59 left:25px; 60 display:none; 61 li { 62 position: relative; 63 .menu-third-level { 64 position: absolute; 65 left:105%; 66 top:0; 67 display:none; 68 li { 69 .menu-forth-level { 70 position: absolute; 71 left:105%; 72 top:0; 73 display:none; 74 } 75 } 76 } 77 } 78 } 79 }

jQuery

1$(document).ready(function() { 2 var menuBtn = $('.menu-btn'); 3 menuBtn.on('click',function(e){ 4 $(".menu-second-level").show(); 5 return false; 6 }); 7 8 $('.menu-second-level > li').on({ 9 'mouseenter':function(){ 10 $(".menu-third-level", this).show(); 11 }, 12 'mouseleave':function(){ 13 $(".menu-third-level", this).hide(); 14 } 15 }); 16 17});

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

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

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

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

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

guest

回答3

0

ベストアンサー

この問題は、下層メニューのli要素などをleftプロパティなどを用いて絶対配置しているため、そもそもmarginpaddingの問題ではないと思いますが、いかがでしょうか?HTML, CSSを変更できないのであれば、少し面倒ですが、after擬似要素を使うことで対応できると思います。

SCSS

1.menu-area { 2 @include clearfix; 3 .menu-btn { 4 display: block; 5 color: #fff; 6 text-align: center; 7 text-decoration: none; 8 background-color: #0caac6; 9 width: 78px; 10 height: 78px; 11 padding: 16px 0 0; 12 @include border-radius(50%); 13 position: relative; 14 z-index: 10; 15 .burgar { 16 width: 33px; 17 height: 26px; 18 position: relative; 19 margin: 0 auto; 20 span { 21 position: absolute; 22 left: 0; 23 right: 0; 24 height: 4px; 25 background-color: #fff; 26 &:nth-child(1) { 27 top: 0; 28 } 29 &:nth-child(2) { 30 top: 50%; 31 margin-top: -2px; 32 } 33 &:nth-child(3) { 34 bottom: 0; 35 } 36 } 37 } 38 p { 39 font-size: 12px; 40 padding-top: 10px; 41 } 42 43 ul { 44 width: 165px; 45 background-color: #eee; 46 margin-right: 10px; 47 @include border-radius(5px); 48 li { 49 text-align: left; 50 color: #000; 51 font-size: 14px; 52 padding: 10px; 53 } 54 } 55 .menu-second-level { 56 position: absolute; 57 top: 100px; 58 left: 25px; 59 display: none; 60 li { 61 position: relative; 62 &::after { /* 追記 */ 63 content: ""; 64 position: absolute; 65 top: 0; 66 left: 100%; 67 width: 10px; 68 height: 42px; 69 } 70 .menu-third-level { 71 position: absolute; 72 left: calc(100% + 10px); /* 修正 */ 73 top: 0; 74 display: none; 75 li { 76 .menu-forth-level { 77 position: absolute; 78 left: 105%; 79 top: 0; 80 display: none; 81 } 82 } 83 } 84 } 85 } 86 } 87}

以下に、動作確認時に使用したコードを書いておきます。質問者さんの環境で上のコードが正常に動かなければ、一度以下のコードを試してみてください。

HTML

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style> 7 .menu-area { 8 overflow: hidden; 9 *zoom: 1; 10 height: 500px; /* 追記 */ 11 background: #000; /* 追記 */ 12 } 13 14 .menu-area .menu-btn { 15 display: block; 16 color: #fff; 17 text-align: center; 18 text-decoration: none; 19 background-color: #0caac6; 20 width: 78px; 21 height: 78px; 22 padding: 16px 0 0; 23 border-radius: 50%; 24 position: relative; 25 z-index: 10; 26 } 27 28 .menu-area .menu-btn .burgar { 29 width: 33px; 30 height: 26px; 31 position: relative; 32 margin: 0 auto; 33 } 34 35 .menu-area .menu-btn .burgar span { 36 position: absolute; 37 left: 0; 38 right: 0; 39 height: 4px; 40 background-color: #fff; 41 } 42 43 .menu-area .menu-btn .burgar span:nth-child(1) { 44 top: 0; 45 } 46 47 .menu-area .menu-btn .burgar span:nth-child(2) { 48 top: 50%; 49 margin-top: -2px; 50 } 51 52 .menu-area .menu-btn .burgar span:nth-child(3) { 53 bottom: 0; 54 } 55 56 .menu-area .menu-btn p { 57 font-size: 12px; 58 padding-top: 10px; 59 } 60 61 .menu-area .menu-btn ul { 62 width: 165px; 63 background-color: #eee; 64 margin-right: 10px; 65 border-radius: 5px; 66 } 67 68 .menu-area .menu-btn ul li { 69 text-align: left; 70 color: #000; 71 font-size: 14px; 72 padding: 10px; 73 } 74 75 .menu-area .menu-btn .menu-second-level { 76 position: absolute; 77 top: 100px; 78 left: 25px; 79 display: none; 80 } 81 82 .menu-area .menu-btn .menu-second-level li { 83 position: relative; 84 } 85 86 .menu-area .menu-btn .menu-second-level li::after { /* 追記 */ 87 content: ""; 88 position: absolute; 89 top: 0; 90 left: 100%; 91 width: 10px; 92 height: 42px; 93 } 94 95 .menu-area .menu-btn .menu-second-level li .menu-third-level { 96 position: absolute; 97 left: calc(100% + 10px); /* 修正 */ 98 top: 0; 99 display: none; 100 } 101 102 .menu-area .menu-btn .menu-second-level li .menu-third-level li .menu-forth-level { 103 position: absolute; 104 left: 105%; 105 top: 0; 106 display: none; 107 } 108 </style> 109</head> 110<body> 111<div class="menu-area"> 112 <a class="menu-btn" href="#"> 113 <div class="burgar"> 114 <span></span> 115 <span></span> 116 <span></span> 117 </div> 118 <p>MENU</p> 119 <ul class="menu-second-level"> 120 <li>AAAAA 121 <ul class="menu-third-level"> 122 <li>BBBBB 123 <ul class="menu-forth-level"> 124 <li>CCCCC</li> 125 <li>CCCCC</li> 126 <li>CCCCC</li> 127 <li>CCCCC</li> 128 </ul> 129 </li> 130 </ul> 131 </li> 132 </ul> 133 </a> 134</div> 135<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 136<script> 137 $(document).ready(function () { 138 var menuBtn = $('.menu-btn'); 139 menuBtn.on('click', function (e) { 140 $(".menu-second-level").show(); 141 return false; 142 }); 143 144 $('.menu-second-level > li').on({ 145 'mouseenter': function () { 146 $(".menu-third-level", this).show(); 147 }, 148 'mouseleave': function () { 149 $(".menu-third-level", this).hide(); 150 } 151 }); 152 }); 153</script> 154</body> 155</html>

投稿2018/08/24 10:05

編集2018/08/24 10:11
s8_chu

総合スコア14731

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

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

balls

2018/08/25 17:53

ご回答大変ありがとうございます。 完璧です!ありがとうございました!!!
guest

0

提示された内容では状況を再現できないので、質問にありました
『余白があっても表示させておくにはどうしたらよいでしょうか?』
※その他の動作はご自身のお手元で上手く行っているものとします。
だけにフォーカスして答えますと、

liにdivか何かをネストして、現状liに適用させているcssをその
divへ適用させる。
liには背景色を適用せず、ご希望の余白分paddingすれば
見かけ上ご所望のものができるのではないでしょうか。

投稿2018/08/24 09:29

Yousuck

総合スコア349

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

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

0

@include clearfix等の@includeの元のコードを追加してください.状況が再現できないので.
cf. Sass の @import ルール
イメージ説明
(HTMLはa.menu-btnの外側に.menu-areaを追記しています)

投稿2018/08/24 08:51

編集2018/08/24 08:52
liveasnotes

総合スコア1284

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問