下記のアドレスはWall street Journalのサイトです。
http://jp.wsj.com/
上のメニューの仕組みについて教えて頂きたいのですが…
例えば、「米国」の上に乗せると、
下のサブメニューが代わり、「経済」「政治」となりますよね。
これを自分のホームページでも作りたいのです。
JavaScriptで作っているのでしょうか?
ソースはどんな感じでしょうか?
No.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]*/
No.2
- 回答日時:
A NO01です
質問の意味を勘違いしておりました、
ANO01はお忘れ下さい。
大カテゴリーにオンマウスすると小カテゴリーが表示される技法は幾つかありますが、Javascriptが一般的です
またCSSだけで行う方法もあります。例えば、このサイトのサンプルなどの応用で作れますね
http://www.k5.dion.ne.jp/~i-araki/css/onmouse.html
No.1
- 回答日時:
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/ …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- その他(学校・勉強) 下記の条件で選べる組み合わせの総数を知りたいです 3 2023/03/29 10:21
- 筋トレ・加圧トレーニング 高校生女子です。 私は一年ほど前から自宅で腹筋トレーニングをしているんですが、なかなかメニューを安定 2 2022/10/06 14:22
- その他(IT・Webサービス) メニューについて 3 2022/07/12 16:06
- ファミレス・ファーストフード CoCo壱のメニューについて CoCo壱のカレーの種類が多く複雑でカレーの辛さ甘さと例えばビーフソー 1 2022/07/15 22:46
- Outlook(アウトルック) Outlook トップ画 イニシャル変えたい Outlookについてわかる方教えてください。 左のメ 1 2022/11/06 23:58
- ダイエット・食事制限 ローファットダイエットについてアドバイスをください。 現在、体脂肪率が28で肥満1型になった旦那のダ 1 2022/09/03 09:06
- Chrome(クローム) VMWareを使用して、ChromeOSをWindows11のPCに入れたい 1 2022/11/15 19:04
- 片思い・告白 恋愛相談 男です。気になる女性を食事にラインで誘いたいです。下記文章どうですか?やんわりとだと関係進 1 2023/01/30 22:17
- ファミレス・ファーストフード 朝マック 1 2022/03/31 23:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSデータの作成方法について(...
-
htmlの文字が縦書きになる
-
HTMLですCSSです この画像のよ...
-
テーブルの行を折りたたみたい...
-
初心者html・CSS ウィンドウを...
-
WEBページを強制的に横画面で見...
-
HTMLで画像をポップアップで表...
-
Affinger6でトップページに記事...
-
htmlで<form>~</form>を並べて...
-
ホームページのURLをコピー...
-
HTMLの CSSのファイルというの...
-
HTMLですCSSです 画像のように...
-
テーブルを中央に配置
-
HTMLに背景を追加するやり方を...
-
12月のカレンダーを表すHTMLを...
-
HTMLです
-
css初心者 フレックスボックス...
-
大至急。webのシングルページを...
-
Windows環境下のHTML内部リンク...
-
HTMLで特定の文字だけ色を変え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
WEBページを強制的に横画面で見...
-
青い枠のみのHTML
-
HTML入門でもう躓いてしまった。
-
列のどこをクリックしてもソー...
-
画像が分割されて切り替わる、...
-
角丸画像の背景色を透明にした...
-
HTMLで画像をポップアップで表...
-
HTMLで特定の文字だけ色を変え...
-
エクセルのファイルのダウンロ...
-
メモ帳の段落の揃え方
-
テーブルタグのセルの幅の一部...
-
<input>のstep属性に違反する入...
-
別サイトのHTML内にある情報を...
-
疑似要素で背景画像に指定したS...
-
スマホ(android)のタッチパネ...
-
アコーディオンメニューが思う...
-
HTMLの・要素・属性・属性値 は...
-
CSSが上手く反映されないみたい...
-
スマホでHTMLファイルを開いて...
おすすめ情報