プロが教えるわが家の防犯対策術!

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

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

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

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

A 回答 (3件)

ざっとしか見てませんが・・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]*/
    • good
    • 0

A NO01です


質問の意味を勘違いしておりました、
ANO01はお忘れ下さい。

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

JavascriptやFlashでもできますが、一般的なのはCSSで設定する方法ですね


こちらにサンプルがあるので、このやり方の応用です。
http://www.css-designsample.com/csslayout/techni …

もっとかっこよく作りたい場合は、
#globalnavi a {
text-indent:-9999px;
}
を指定して、a と a:hover にbackground-imageでそれぞれ別のメニュー画像を指定
これでマウスオーバー効果を使ったメニューもできます
詳しいやり方は下記参照
http://www.zkdesign.jp/arch/Web%C0%A9%BA%EE/CSS/ …
    • good
    • 0

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