• ベストアンサー

既存のメニューにプルダウンメニューを追加したい

下記のサイトのショッピングのメニューに、添付画像のようなプルダウンメニューを追加したいのです。 http://www.chanvre.jp/index.html 現在は全メニュー、画像配置のオンマウス設定になっています。 ネットなどで調べて修正などしてみましたが、なかなかうまくいかず こちらに相談しました。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

いずれもナビゲーションリンクですから、ulないしolでマークアップすべきです。 二列目になるものも同様にabsoluteで指定すればよいです。 このときMacとWinというより、ブラウザによってずれるのは、箇条書きのmarginとpaddingが違うからです。  olやulにpadding-leftで字下げをしているものも、liのmargin-leftで字下げしているものも表示結果は同じですが、CSSで、li{margin:0;}と一方だけ設定するとmarginで字下げしているブラウザには有効ですが、ol.ulにpaddingで字下げしているブラウザには効果がないということです。  そのため、ナビゲーションリンクであるliを指定するときは <div class="nav">  <ul>   <li><a href=""></a></li>   <li><a href=""></a></li>   <li><a href=""></a></li>  </ul> </div> というマークアップの場合 div.nav ol,div.nav ul,div.nav li{  list-style:none;  margin:0;  padding:0;  display:block; } などとして、これらの設定をクリアしておきます。 ※list-styleをul,olだけでなくliについてもlist-style:none;が必要なブラウザがある。 ※marginやpaddingはいったん0にしておく。 ※div.navの傘下の箇条書きのみを子孫セレクタで指定しておく  たぶんそれで、ブラウザによるずれは回避できるはずです。

その他の回答 (4)

  • abacabu
  • ベストアンサー率37% (250/663)
回答No.4

ちょっと補足しておきます。 何故横表記にしたかと言いますと、この様に関連性がないと プルダウンとして機能しない為です ちなみに最初の親要素を <td class="oya">親</td>などとしてもよいですね。 idは1つのHTMLデータで1回の使用しか出来ません。 CSSでの表記 td#oya classは1つのHTMLデータに複数使えます。 CSSでの表記 td.oya floatはfloat:left;で→親1親2・・・となり、 float:right;で→親6親5・・・となります。 float解除はfloat:none;と clear:both;または設定したleft or rightとすると解除です。 floatはposition,widthなどを設定しないと使えません。

  • abacabu
  • ベストアンサー率37% (250/663)
回答No.3

No,1で書き込みした者です。 やや書き込み内容に不具合(個人情報)があってなかなか表示されませんでした事お詫び致します。 基本的にテスト作成だとしてもDTDは省かないでください。上手く表示されません。 あとタグの大文字記述は非推奨です。あくまでタグ、class、id辺りはしっかり小文字で。 どうしてもテーブルレイアウトをしたいのでしょうか? 私は基本的に縦表示されるリストの利点を生かしたレイアウトが楽だと思うのですが。 テーブルで行う場合で、親メニューからのドロップダウンにしたい場合は、 (やった事無いので実現するか疑問ですが) 上から <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=EUC-JP" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>otamesi</title> <meta name="author" content="abacabu" /> <link rel="stylesheet" type="text/css" href="./otamesi.css" /> </head> <body> <table id="menu"> <tr> <th><a href="">親</a></th><td>子</td><td>子</td><td>子</td><td>子</td> </tr> <tr> <th><a href="">親</a></th><td>子</td><td>子</td><td>子</td><td>子</td> </tr> <tr> <th><a href="">親</a></th><td>子</td><td>子</td><td>子</td><td>子</td> </tr> <tr> <th><a href="">親</a></th><td>子</td><td>子</td><td>子</td><td>子</td> </tr> <tr> <th><a href="">親</a></th><td>子</td><td>子</td><td>子</td><td>子</td> </tr> <tr> <th><a href="">親</a></th><td>子</td><td>子</td><td>子</td><td>子</td> </tr> </table> </body> </html> とやって行ってCSSで @charset "EUC-JP"; table#menu tr { /*親を横並びにフロート*/ float: left; } table#menu td { /*子を非表示*/ position:relative; display: none; } table#menu tr:hover td { /*親を触ると子が縦表示で出る*/ clear: both; position:relative; display: block; } こんな感じでどうですか?(やっとできた…) ちょっと無理やりですがどうしてもtableでやりたい場合はどうぞ。 テーブルのこういう使い方はあまり推奨されておりません。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

さっき書いた IE6,IE7だとメニューが写真の裏に表示される - HTML - 教えて!goo ( http://okwave.jp/qa/q6723422.html ) を参考に・・  親リストにposition:relative;で、親リストにフォーカスがないときは子供のリストにdisplay:none;、上に乗ると:hover(擬似クラス)にdisplay:block;とする。擬似要素が追加されて優先度が上がるため、表示されるということです。

9950high
質問者

補足

回答ありがとうございます。 実はもう1つ別パターンでの作成していて、下記のような表示設定を作成したのですが winとmacでの表示がずれてしまうのですが、解りますでしょうか? http://www.chanvre.jp/index_test2.html よろしくお願いします。

  • abacabu
  • ベストアンサー率37% (250/663)
回答No.1

独学でWEBサイトを作成している者です。 tableでプルダウンメニュー(又はドロップダウンメニュ―)つくってますか? その方法は初めて見ました。 私は最近参考書や、ネットで見る<ul> or <ol>と入れ子で<li>を使うリストタイプのプルダウン の方法をご紹介しておきます。 <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=EUC-JP" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>プルダウンメニューサンプル2</title> <meta name="ROBOTS" content="INDEX,NOFOLLOW,NOIMAGEINDEX,NOIMAGECLICK" /> <meta name="author" content="abacabu" /> <meta name="copyright" content="(C) 2011 abacabu" /> <meta name="Reply-to" content="kuurin@sound.ocn.ne.jp" /> <link rel="stylesheet" type="text/css" href="./pds2.css" /> </head> <body> <div id="header"> <div id="navigation"> <ul> <li><a>navigation1</a> <ul> <li><a>subnavi1</a></li> <li><a>subnavi2</a></li> <li><a>subnavi3</a></li> <li><a>subnavi4</a></li> </ul> </li> <li><a>navigation2</a> <ul> <li><a>subnavi1</a></li> <li><a>subnavi2</a></li> <li><a>subnavi3</a></li> <li><a>subnavi4</a></li> </ul> </li> <li><a>navigation3</a> <ul> <li><a>subnavi1</a></li> <li><a>subnavi2</a></li> <li><a>subnavi3</a></li> <li><a>subnavi4</a></li> </ul> </li> <li><a>navigation4</a> <ul> <li><a>subnavi1</a></li> <li><a>subnavi2</a></li> <li><a>subnavi3</a></li> <li><a>subnavi4</a></li> </ul> </li> <li><a>navigation5</a> <ul> <li><a>subnavi1</a></li> <li><a>subnavi2</a></li> <li><a>subnavi3</a></li> <li><a>subnavi4</a></li> </ul> </li> </ul> </div> </div> <div id="footer"> <address> *公開日:2011年4月日 *作成者:abacabu </address> </div> </body> </html> 外部CSS内容は↓ @charset"EUC-JP"; #header{ position:relative; x-index:100; /*ボックスが一番上の階層に表示される様に設定*/   width:100%; /*win IE6 対策*/ height:101px; background:#ffffff; } #navigation{ position:absolute; top:37px; /*プルダウンメニューのtopからの位置*/ left:206px; /*プルダウンメニューのleftからの位置*/ width:536px; /*プルダウンの全体の幅*/ } #navigation ul{ margin:0; padding:0; list-style:none; /*これでliの・を非表示にしてすっきりした字にする*/ } #navigation li{ float:left; width:107px; margin:0; } #navigation li a{ display:block; /*これが無いと親メニューが表示されない*/ width:100%; /*IE6対策*/ padding:6px 0 8px 0; text-align:center; color:#d2691e; text-decoration:none; background-color:#4c924d;    ←*1 } #navigation li a:hover{ background-color:#297e27;    ←*2 } #navigation ul ul{ background:#eeeeee; display:none; } #navigation ul ul li{ float:none; /*親メニューをfloatして横並びにしているので             ここで解除して子メニューを通常の縦並びにする*/ position:relative; background:#eeeeee;    ←*これを消して } #navigation ul ul li a{ border-top:1px solid #ffffff; background:none;        ←*1(これいらんかも) font-size:90%; font-weight:normal; padding:6px 0; } #navigation ul ul li a:hover{ color:#ffffff; background-color:#ec8602;  ←*2 } #navigation ul li:hover > ul{ background-image:none;    ←*1(これか上のul ul li aいずれか要らないかも) display:block; } 背景に画像を入れる場合は 左右にa状態とa:hoverの状態の背景を連結した1枚の画像を用意します。 *1に↓   background-image:url(./img/menu.png); background-position:left top; この様に記述し、 *2に↓ background-position:right top; これだけを追加します(背景は継承してます) この場合の画像は左(left)がマウス乗せない状態、 右(right)がマウス乗せた状態の画像で aとa:hoverで表示位置を入れ替えてます。 blockになっているので表示できていてblock幅を指定しているので 見た目上変わる様になります。 そのボックス幅より広く画像を作るか、同じ幅で作れば問題なく機能します。 若干画像が狭かったらボックスを縮めて下さい。

関連するQ&A