これ何て呼びますか

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

解決済

  • 質問者：9950high
  • 質問日時：
  • 回答数：5件

下記のサイトのショッピングのメニューに、添付画像のようなプルダウンメニューを追加したいのです。
http://www.chanvre.jp/index.html

現在は全メニュー、画像配置のオンマウス設定になっています。
ネットなどで調べて修正などしてみましたが、なかなかうまくいかず
こちらに相談しました。
よろしくお願いします。

「既存のメニューにプルダウンメニューを追加」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

いずれもナビゲーションリンクですから、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の傘下の箇条書きのみを子孫セレクタで指定しておく

　たぶんそれで、ブラウザによるずれは回避できるはずです。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： abacabu
  • 回答日時：

ちょっと補足しておきます。


何故横表記にしたかと言いますと、この様に関連性がないと
プルダウンとして機能しない為です
ちなみに最初の親要素を
<td class="oya">親</td>などとしてもよいですね。
idは１つのＨＴＭＬデータで１回の使用しか出来ません。
ＣＳＳでの表記　td#oya
classは１つのＨＴＭＬデータに複数使えます。
ＣＳＳでの表記　td.oya
floatはfloat:left;で→親１親２・・・となり、
float:right;で→親６親５・・・となります。
float解除はfloat:none;と
clear:both;または設定したleft or rightとすると解除です。
floatはposition,widthなどを設定しないと使えません。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： abacabu
  • 回答日時：

Ｎｏ，１で書き込みした者です。


やや書き込み内容に不具合(個人情報)があってなかなか表示されませんでした事お詫び致します。
基本的にテスト作成だとしてもＤＴＤは省かないでください。上手く表示されません。
あとタグの大文字記述は非推奨です。あくまでタグ、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.dt …
<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でやりたい場合はどうぞ。
テーブルのこういう使い方はあまり推奨されておりません。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

さっき書いた


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

この回答への補足

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

補足日時：2011/05/10 14:00
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： abacabu
  • 回答日時：

独学でＷＥＢサイトを作成している者です。


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.dt …
<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>プルダウンメニューサンプル２</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>

外部ＣＳＳ内容は↓
@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;　　　　←＊１
}

#navigation li a:hover{
background-color:#297e27;　　　　←＊２
}

#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;　　　　　　　　←＊１(これいらんかも)
font-size:90%;
font-weight:normal;
padding:6px 0;
}

#navigation ul ul li a:hover{
color:#ffffff;
background-color:#ec8602;　　←＊２
}

#navigation ul li:hover > ul{
background-image:none;　　　　←＊１(これか上のul ul li aいずれか要らないかも)
display:block;
}
背景に画像を入れる場合は
左右にa状態とa:hoverの状態の背景を連結した１枚の画像を用意します。
＊１に↓
　　background-image:url(./img/menu.png);
background-position:left top;
この様に記述し、
＊２に↓
background-position:right top;
これだけを追加します（背景は継承してます）

この場合の画像は左(left)がマウス乗せない状態、
右（right）がマウス乗せた状態の画像で
aとa:hoverで表示位置を入れ替えてます。
blockになっているので表示できていてblock幅を指定しているので
見た目上変わる様になります。
そのボックス幅より広く画像を作るか、同じ幅で作れば問題なく機能します。
若干画像が狭かったらボックスを縮めて下さい。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報