- 締切済み
ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- taka451213
- ベストアンサー率47% (436/922)
「Flexbox」 使ったらアカンのかな？
- H240S18B73
- ベストアンサー率65% (190/288)
js使っていいなら余裕 $(function() { $('#menu li ul').each(function(i,e){ $(this).width(Math.min(600,$(this).find('li').length*200)); }); $("#menu li").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); html,cssで対応するなら、htmlの構造をちょっと変えないと無理かも display:inline-block;とかインライン要素にすると 中身に合わせて幅が変わるのでそれを利用するカンジ 最大幅指定のための親要素を用意してそこで最大幅指定 （inline-blockはコード上でスペースなく書かないと間が空くので ちょっと余裕持った幅にするかスペース部分をコメントアウトするかしてください） <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div.test{width:610px} div.test ul{ border:1px solid #aaa;display:inline-block;padding:0; } div.test ul li{width:200px;display:inline-block;margin:0;padding:0;} </style> </head> <body> <div class='test'> <ul> <li>test</li> <li>test</li> </ul> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </body> </html>
- tkmojo
- ベストアンサー率50% (105/207)
これ、意外と出来ないんじゃないかな…? 右側にスペースが空くのは#menu li ul にwidth: 600px;が入っているからですが、それが無ければ当然#menu li ulはその親ボックスの幅（200px）に合わせられるので、中のliは全部縦並びになります。 #menu li ulの幅を単純にその下のliの数によって変化させるのはcssでは無理のような気がします。 「liが少なければliの幅で、多ければ3つの地点で」折り返すという指定が両立出来ないんですよね。 position:absolute;と親ボックスへの横幅指定が無ければmax-widthとかで対応出来そうですが…。 内容物（li）の数によって手動でulにクラスを付けるのが一番単純で簡単な方法ですね。 jsでliの数を取得して、その数によってクラスが付くようにすれば自動でも対応できそうだけど、そこまでやるべきものかどうか…。
