文字の上に乗せると、メニューが変わる仕組み

質問

下記のアドレスはWall street Journalのサイトです。
http://jp.wsj.com/

上のメニューの仕組みについて教えて頂きたいのですが…

例えば、「米国」の上に乗せると、
下のサブメニューが代わり、「経済」「政治」となりますよね。

これを自分のホームページでも作りたいのです。
JavaScriptで作っているのでしょうか？
ソースはどんな感じでしょうか？

回答No.3

ORUKA1951 · ベストアンサー

ざっとしか見てませんが・・firefox+firebugで簡単に調べられる。
普通に、ナビゲーションリンクですね。
<ul class="nav">
　<li><a href=""></a>
　　<ul>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　</ul>
　</li>
　<li><a href=""></a>
　　<ul>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　</ul>
　</li>
</ul>
HTMLが、文書構造にしたがってきちんとマークアップされているので、あとはスタイルシートで、プルダウンメニューを横だろうが縦だろうがご自由にと言うところ。
[表示]→[スタイルシート]→[なし]でスタイルシートなしで見てもちゃんと伝わる。
HTMLソースは、ソース表示で見ても良い。(firebugを使うと、どの部分のソースかがよくわかります。)
CSSは、とてもよく使われる方法で簡単、どのように配置するかというあなた次第なので省きます。
　簡単に言うとdisplay:noneでいったん消して、li:hover(擬似クラス)で詳細度を上げてdisplay:block;で上書きしてます。
div.nav li li{display:none;}/* 詳細度[0,0,1,3] */
div.nav li:hover li{display:block;}/* 詳細度[0,0,2,3]*/

回答No.2

yui56544

A NO01です
質問の意味を勘違いしておりました、
ＡＮＯ01はお忘れ下さい。

大カテゴリーにオンマウスすると小カテゴリーが表示される技法は幾つかありますが、Ｊａｖａｓｃｒｉｐｔが一般的です
またＣＳＳだけで行う方法もあります。例えば、このサイトのサンプルなどの応用で作れますね
http://www.k5.dion.ne.jp/~i-araki/css/onmouse.html

回答No.1

yui56544

JavascriptやＦｌａｓｈでもできますが、一般的なのはCSSで設定する方法ですね
こちらにサンプルがあるので、このやり方の応用です。
http://www.css-designsample.com/csslayout/technique-3.html

もっとかっこよく作りたい場合は、
#globalnavi a {
text-indent:-9999px;
}
を指定して、a と　a:hover　にbackground-imageでそれぞれ別のメニュー画像を指定
これでマウスオーバー効果を使ったメニューもできます
詳しいやり方は下記参照
http://www.zkdesign.jp/arch/Web%C0%A9%BA%EE/CSS/TIPS/%A5%E1%A5%CB%A5%E5%A1%BC%C9%F4%CA%AC%A4%CB%B2%E8%C1%FC%A4%F2%BB%C8%A4%A6/