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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ドロップダウンメニュー

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

Q&A

解決済

1回答

1837閲覧

【はてなブログ】ドロップダウンメニュー蘭をサイドに出させる方法

lagrun12345

総合スコア9

ドロップダウンメニュー

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

0グッド

0クリップ

投稿2018/06/14 09:00

ドロップダウンメニューについてです。

メニューボタンを押すと、下ににょきっと出てくるのでは、なく、その横に
ださせるってどうやるのですか。。。

また、追加なんですが、スマホ、タブレットでタップされた場合、
メニューボタンを戻す事できなくなっていました。。

コードは以下の通りです。

html

1 <ul id="normal" class="dropmenu"> 2 <li><a href="https://lagrun123.hateblo.jp/">MENU</a> 3 <ul> 4 <li><a href="https://lagrun123.hateblo.jp/">最新記事</a></li> 5 <li><a href="https://lagrun123.hateblo.jp/entry/2018/06/06/221147">自己紹介</a></li> 6 <li><a href="#">パチンコ記事</a></li> 7 <li><a href="https://lagrun123.hateblo.jp/archive/category/%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88">スロット記事</a></li> 8 </ul> 9 </li> 10 </ul>

CSS

1 2/* <system section="theme" selected="6653586347155924442"> */ 3@import "https://blog.hatena.ne.jp/-/theme/6653586347155924442.css"; 4/* </system> */ 5 6/* <system section="background" selected="pattern-02"> */ 7body{ background-image: url('/images/theme/backgrounds/2014/pattern-02.png'); background-repeat: repeat; background-attachment: fixed; background-position: 0 0; background-size: 40px 70px; } @media (-webkit-min-device-pixel-ratio: 2) { body {background-image: url('/images/theme/backgrounds/2014/pattern-02@2x.png');} } 8/* </system> */ 9/* Responsive: yes */ 10.dropmenu{ 11 *zoom: 1; 12 list-style-type: none; 13 width: 960px; 14 margin: 5px auto 30px; 15 padding: 0; 16} 17.dropmenu:before, .dropmenu:after{ 18 content: ""; 19 display: table; 20} 21.dropmenu:after{ 22 clear: both; 23} 24.dropmenu li{ 25 position: relative; 26 width: 20%; 27 float: left; 28 margin: 0; 29 padding: 0; 30 text-align: center; 31} 32.dropmenu li a{ 33 display: block; 34 margin: 0; 35 padding: 15px 0 11px; 36 background: #8a9b0f; 37 color: #fff; 38 font-size: 14px; 39 line-height: 1; 40 text-decoration: none; 41} 42.dropmenu li ul{ 43 list-style: none; 44 position: absolute; 45 z-index: 9999; 46 top: 100%; 47 left: 0; 48 margin: 0; 49 padding: 0; 50} 51.dropmenu li ul li{ 52 width: 100%; 53} 54.dropmenu li ul li a{ 55 padding: 13px 15px; 56 border-top: 1px solid #7c8c0e; 57 background: #6e7c0c; 58 text-align: left; 59} 60.dropmenu li:hover > a{ 61 background: #6e7c0c; 62} 63.dropmenu li a:hover{ 64 background: #616d0b; 65} 66#normal li ul{ 67 display: none; 68} 69#normal li:hover ul{ 70 display: block; 71}

はてなブログ

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

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

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

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

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

guest

回答1

0

自己解決

すみません。ドロップダウンメニューを辞めることにしました。

理由:メニュー項目数が4つしかないので、どちらにせよ、メニュー化するメリットがないとおもったので。

投稿2018/06/14 18:27

lagrun12345

総合スコア9

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問