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

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

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

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

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

メニュー

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

CSS

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

Q&A

解決済

1回答

1978閲覧

アコーディオンメニュー(ドロップダウンメニュー)の出し方について

begginer_class

総合スコア14

HTML5

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

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

メニュー

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

CSS

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

0グッド

0クリップ

投稿2020/06/04 01:38

###実現したいこと
子階層のメニューを、親階層のメニュー名をホバーで表示するようにしているのですが、子階層を表示する際に、親階層の要素を動かさずに子階層だけパラパラと表示(親階層に影響を与えず独立)されるようにしたいです。

###現状
表現がうまくできないのですが、子階層を表示するときに親階層のメニューや会社ロゴなども子階層分高さができてしまい、間延びしてしまうような感じになっています

#####コード
親階層のナビゲーションメニューバーはBootstrap4を利用しています。

html

1 <nav class="navbar navbar-expand-lg fixed-top navbar-light "> 2 <img src="img/logo.png" alt="会社ロゴ" width="250"> 3 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#gnavi" aria-controls="Navber" aria-expanded="false" aria-label="Toggle navigation"> 4 <span class="navbar-toggler-icon"></span> 5 </button> 6 <div id="gnavi" class="collapse navbar-collapse"> 7 <ul class="nav navbar-nav"> 8 <li><a href="menu1.php">menu1</a></li> 9 <li><a href="menu2.html">menu2</a></li> 10 <li><a href="menu3.php#2">menu3</a></li> 11 <li><a href="menu4.php#4">menu4</a> 12 <ul> 13 <li class="accordion"><a href="sub_menu1.html">子メニュー1</a></li> 14 <li class="accordion"><a href="sub_menu2.html">子メニュー2</a></li> 15 <li class="accordion"><a href="sub_menu3.html">子メニュー3</a></li> 16 <li class="accordion"><a href="sub_menu4.html">子メニュー4</a></li> 17 <li class="accordion"><a href="sub_menu5.html">子メニュー1</a></li> 18 </ul> 19 </li> 20 <a href="index.php#6" class="contact">contact</a> 21 <a href="about.html" class="about">about</a> 22 </ul> 23 </div> 24 </nav>

css

1nav li:not(.col-xl-2) { 2 float: left; 3 flex: 1 0 auto; 4} 5nav li a:not(.col-xl-2) { 6 text-decoration: none; 7 text-align: center; 8 width: 100%; 9 display: block; 10 margin-top: 10px; 11 padding: 10px 0; 12} 13nav li a:hover { 14 background-color: #dfdfdf; 15 color: #adadad; 16} 17 18nav a:hover :not(.col-xl-2, .consul, .contact) { 19 background-color: #dfdfdf; 20 color: #adadad; 21} 22 23 24/*子階層*/ 25.nav ul { 26 text-align: center; 27} 28.nav li li { 29 height: 0; 30 overflow: hidden; 31 transition: .5s; 32 clear: both; 33} 34.accordion a { 35 margin-top: 0 !important; 36 padding: 10px 20px !important; 37 text-align: center; 38} 39.nav li li a { 40 border-top: 1px solid #eee; 41} 42.nav li:hover > ul > li { 43 height: 2rem; 44 overflow: visible; 45} 46

試したこと

子階層のulにクラスを付与しなんとかできないかと考えましたが、何かと触ると親階層に影響が出てしまい、やり方を変えれば親階層に影響が出ないのか、そもそもこの階層では子階層のulを操作することはできないのかがわかりませんでした。

長くなってしまいましたが、
以上、ご教示お願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

こちらのサイトを参考にさせていただいたところ実現できました。

投稿2020/06/04 02:36

begginer_class

総合スコア14

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問