グローバルメニューの作り方

質問

はじめまして。peace193と申します。WEBプログラミング初心者です。

トヨタ自動車のようなグローバルメニューを作りたいのですが、どのようなプログラムで表現しているのでしょうか。

http://toyota.jp/

このサイトでは、グローバルメニューの下にイメージが配置されており、メニュー選択時にそのイメージにかぶる形で下方にメニューが展開されています。

私はさらにそこから横に展開する（あるメニューを選択→下方にメニュー展開→メニューを選択→さらに横に展開）表現をしたいのです。

お忙しいところ恐縮ですが、ご教示頂けると幸いです。

回答No.1

reggaepunc · ベストアンサー

まず、これはflashではないです。
css or javascriptもしくは
css + javascriptで実現できます。
横に展開するようにも出来ますよ。

補足

reggaepunc様、ご多忙の中、ご回答ありがとうございます。

おっしゃる通り、java+cssで実現できることがわかりました。サンプルサイトを参考に自分なりに改造してみたのですが、うまく行かない部分がございます。

http://css-eblog.com/csstechnique/post-11.html

このサイトの通りには動かせましたが、メニュー部分にマウスを当てると色が変わるようにすると、下のプルダウンメニューの表示が崩れてしまいました。単純に　dd a:hover を追加しました。

回答No.2

reggaepunc

崩れている部分のソースを記載頂けますでしょうか？
あと、崩れているブラウザは何になりますか？

補足

reggaepunc様、ご返答ありがとうございます。
グローバルメニューのCSSソースを記載致します。
プルダウンメニューが表示されるまではいいのですが、いざ、マウスをそこに持っていくと、表示が崩れてしまいます。CSSは他に、win-ie、resetを使っております。また、サンプルサイトのjsファイルも使っております。今のところ、IE7で確認したところ、問題はありません。ご教示頂けると幸いです。

dl#menu dd{

background: url(../images/bar01.jpg) center repeat-x;
border-right: inset 2px #06F;
float: left;
text-align: center;
position: relative;
width: 188px;
height: 20px;

}

dl#menu dd a {
display:block;
color: #fff;
font-weight: bold;
text-decoration: none;
width: 182px;
height:14px;
font-size: 14px;
padding:4px;

}

dl#menu dd a:hover{

background:url(../images/hover01.jpg);
width:182px;
height:12px;

}

dl#menu dd ul{/*グローバルメニュー下、プルダウンメニューのスタイル。*/

background-color: #B2D4F2;
display: none;
position: absolute;
width:188px;
z-index: 0;

}

dl#menu dd ul a{
font-size: 100%;
color: #0d55bc;
line-height: 130%;
text-align:left;
padding:5px ;

}

dl#menu dd ul a.hierarchy{

background: url(../images/gmArrow.gif) 170px center no-repeat;

}

dl#menu dd ul li.rollOver{ /*プルダウンメニュー、マウスオーバー時のスタイル。*/

background-color: #338BDC;

}

dl#menu dd ul li.rollOver a.rollOverA{

color: #D1E880;

}

dl#menu dd ul li{

position: relative;

}

dl#menu dd ul li ul{

display: none;
position: absolute;
top: 0px;
left: 188px;
z-index: 0;

}