- ベストアンサー
ナビゲーションボタンの幅をページの幅に合わせる方法について
- ナビゲーションボタンの幅をページの幅に合わせる方法について教えてください。
- 現在、ナビゲーションボタンの幅をCSSで調整していますが、より汎用的にページ幅に合わせる方法があるのでしょうか？
- サンプルソースのようなドロップダウンを備えたナビゲーションを実装したいですが、CSSの知識が不足しており困っています。アドバイスをお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
言葉足らずで申し訳ありません。 jQueryを利用したサンプルとなっておりますので、先ほど提示した ソース以外にjQuery(最新版だとjquery-1.4.2.min.js)が必要となります。 http://jquery.com/から最新版をダウンロードし、 先ほどのソースの下記箇所(jquery.min.js)を適宜書き換えてください。 <script src="jquery.min.js"></script> 例：jquery-1.4.2.min.jsをダウンロードし使用する場合 <script src="jquery-1.4.2.min.js"></script> また、リンク先にあるサンプルソースに適用する場合には、 liの下にも<ul>要素を作成されているようですので、 var li = jQuery("#menu li"); ↓ var li = jQuery("#menu > li"); に変更が必要です。 最終的なJavaScript部分は下記のようになります。 <script src="jquery.min.js"></script> <script> jQuery(document).ready(function(){ var width = jQuery("#menu").width(); var li = jQuery("#menu>li"); li.each(function(){ jQuery(this).css("width",Math.floor(width/li.length)+"px"); }); }); </script>
その他の回答 (2)
- nekomikekamo
- ベストアンサー率73% (71/97)
javaScriptを利用すれば比較的簡単に実装できるのではないでしょうか。 CSSだけではできないような気がします。 jQueryを利用した実装例を示します。 <ul id="menu">以下にli要素を増やせば自動的に幅調整してくれます。 javaScriptがOFFの場合の表示なども考慮してデザインされることを お勧めします。 <html> <head> <script src="jquery.min.js"></script> <script> jQuery(document).ready(function(){ var width = jQuery("#menu").width(); var li = jQuery("#menu li"); li.each(function(){ jQuery(this).css("width",Math.floor(width/li.length)+"px"); }); }); </script> <style> #main_nav {width:800px;} ul{padding:0;margin:0;} ul li{display:inline;float:left;} li a {display:block;} </style> </head> <body> <div id="main_nav"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </div> </body> </html>
お礼
こんばんは。ご親切にソースまで提示して頂き、ありがとうございます。 早速とばかり、ソースを拝借して試しているのですが、指定した幅（ソースでいうwidth:800px）に反映してくれません。 当方が考えているのは、下層部のリンク先も表示するようなドロップダウンを考えているので、そのままのソースが利用出来ると甘く考えていませんが、ヒントに繋がればと考えているので、今一度アドバイスのほど頂戴出来れば幸いです。 お忙しいなか恐縮ですが宜しくお願い致します。
そこで質問なのですが、上記のよなサンプルソースの場合、widthは指定しなくても、ボタンの数に合わせて汎用的にページ幅に沿うようなものは出来ないのでしょうか？ >>ないです。 サンプルソースのように、多階層が可能なドロップダウンを備えたナビゲーションが欲しく、やっと探し得たのですが、CSSの知識が乏しく困っている状態です。 >>CSSで幅を指定できるから便利なんです。Javascriptでやると大変複雑になるでしょう。 お忙しいなか恐縮ですが、アドバイスなど頂戴出来れば幸いです。宜しくお願い申し上げます。 >>CSSでできるから楽にサイズ設定ができるのです。
お礼
こんばんは。早々のアドバイスをありがとうございます。 すぐに解決できそうにありませんが貴重なアドバイスとしてお受けいたします。 ありがとうございました。
お礼
発送のお返事、ご親切な対応をありがとうございます。 悲しいかな、設置しただけで解決するまでには至りませんでしたが、このヒントを基に取り組んでみたいと思います。 取り急ぎご挨拶とお礼まで。 ありがとうございました。