メガメニューのドリルダウンメニューで孫を出したい
解決済
回答 2
投稿
- 評価
- クリップ 2
- VIEW 3,130
http://codepen.io/ChihiroTachikawa/pen/pyXdbJ
上記にコードを挙げましたが、メガメニューで下記のように孫メニューを出したく思っています。
liの入れ子が必要になると思うのですが、どうしても一番最後のクーポン～の下に出たりします。
また以下なども試しましたが、マウスを離した際に孫要素が画面に残ったりと課題が残りました。
<li onclick="obj=document.getElementById('example1').style; obj.display=(obj.display=='none')?'block':'none';"><a style="cursor:pointer;">食品</a>
<!-- 折り畳み展開ポインタ -->
<a style="cursor:pointer;" class="open_button"><font color="#fff">▼ 実装例① （クリックで展開します）</font></a>
<!--// 折り畳み展開ポインタ -->
<style>
#uresi ul li{
background:yellow !important;
}
</style>
<!-- 折り畳まれ部分 -->
<li id="example1" style="display:none;clear:both;">
<div id="uresi">
<dt>お菓子・アイス</dt>
<dt>うれしい</dt>
</div>
</li>
<!--// 折り畳まれ部分 -->
</li>上手く子の直下に画像のように孫要素が出てマウスを放すと戻るという仕組みに出来ませんでしょうか。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
<div id="mainsection">
<ul id="dropmenu">
<li><a href="#"><img src="image/head/navi_chople_logo.png" width="72" height="25" alt=""/>カテゴリ</a>
<ul>
<li><a href="#">すべて</a></li>
<li><a href="#">食品</a>
<ul>
<li><a href="#">お菓子</a></li>
<li><a href="#">アイス</a></li>
</ul>
</li>
<li><a href="#">飲料</a></li>
</ul>
</li>
<li><a href="#">メニュー</a>
<ul>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
</ul>
</li>
<li><a href="#">メニュー</a>
<ul>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
</ul>
</li>
<li><a href="#">メニュー</a>
<ul>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
</ul>
</li>
<li><a href="#">メニュー</a>
<ul>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
</ul>
</li>
</ul>
<nav>#dropmenu{
position: relative;
list-style-type: none;
width: 1000px;
height: 40px;
margin:0;
padding: 0;
background: #8a9b0f;
border-bottom: 5px solid #535d09;
border-radius: 3px 3px 0 0;
}
#dropmenu li{
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
#dropmenu img{
vertical-align:middle;
margin-top:-10px;
margin-right:10px;
}
#dropmenu li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;
}
#dropmenu li ul{
list-style: none;
/* position: absolute; */ /*modified */
/* top: 100%; */ /*modified */
/* left: 0; */ /*modified */
margin: 0;
padding: 0;
border-radius: 0 0 3px 3px;
}
#dropmenu li ul li{
overflow: hidden;
width: 1000px;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
#dropmenu li ul li a{
padding: 13px 15px;
background: #6e7c0c;
text-align: left;
font-size: 12px;
font-weight: normal;
}
#dropmenu li:hover > a{
background: #6e7c0c;
color: #eff7b1;
}
#dropmenu > li:hover > a{
border-radius: 3px 3px 0 0;
}
#dropmenu li:hover{ /*modified */
height:auto !important; /*modified */
} /*modified */
#dropmenu li:hover > ul > li{ /*modified */
overflow: visible; /*modified */
height: 38px;
background: #6e7c0c;
border-top: 1px solid #7c8c0e;
border-bottom: 1px solid #616d0b;
}
#dropmenu li:hover ul li:first-child{
border-top: 0;
}
#dropmenu li:hover ul li:last-child{
border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}
https://jsfiddle.net/19b4eyr6/
なんかおかしいところあるかもしれませんが。
結構疲れました……
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
<ul>
<li>a</li>
<li>b</li>
<li class="parent">c
<ul class="child">
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
</li>
</ul>
htmlをこのような構成にして
.child{
display: none;
}
.parent:hover>.child{
display: block;
}
とすればcssだけでも可能です。li:hover未対応のブラウザも対象の場合はJavaScriptで同じことをしてあげれば大丈夫だと思います。
リンク先を拝見したのですが
「JavaScriptのコード」と「htmlコードの孫要素」がないようでしたので孫要素が残ってしまう件に関しては確認できませんが表示を切り替える部分をできるだけ単純化されると良いと思います。
孫要素の表示位置がおかしい件に関しては#dropmenu liと子孫セレクタでfloat:leftが指定されているので子/孫要素のliにもfloatが適用されているあたりが怪しそうです。
#dropmenu>liと子セレクタを使用するか#dropmenu li.parent等と親要素のみにclassを設定するなどして親要素のcssの指定が子要素に影響しないように工夫してみてください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/21 14:03
デザイン仕様変更をおすすめしときます。
2016/05/23 11:54
UI的にもっと他のがよさそうですね。。
色々やっていただいたにも関わらず、デザイン的によろしくない結果になってしまい申し訳ありません。。。
以下がソースです。↓
http://codepen.io/ChihiroTachikawa/pen/pyXdbJ