ホームページ作成

Question

http://www.uniqlo.com/jp/

このユニクロのサイトで、ＭＥＮと押すと下にカテゴリが出てきて
トップスと押すと、さらに下にカテゴリがでてきます。
ツールチップとは違いますよね？

そこでまず、この下に出てくる覧を何と呼ぶのか、名前について知りたいのと、

もう一つは、ＭＥＮを押して下にカテゴリが出てきた時は下の内容全体が下がりますが、トップスを押した場合はカテゴリが出てきても全体内容は下がりません。

これはどうやって作るのでしょうか。

以上、
(1)この機能の名称と、(2)それを作る方法（HTML直書きなのか？CSSなのか？等）、の二つをどうか教えてください。

anyhelp · Accepted Answer

1)二階層目の箇所はsub navigationといいます。一階層目はprimary navigationです。海外サイトで調べればいいサンプルが出てきます。

2)javascriptです。

weakweak · Answer

1) プルダウンですかね？
2) HTMLとCSSを動的に変更する(ページ全体の更新なしに変更する)jqueryという全く別の言語を利用していて、さらに言えばjqueryのライブラリであるjquery UIを利用しているようです(詳しい説明→ http://www.webcreatornote.com/2011/05/jquery-ui%E3%81%A8%E3%81%AF%E3%83%BB%E3%83%BB%E3%83%BB%E3%80%90jquery-ui-%E3%81%AE%E3%81%8B%E3%82%93%E3%81%9F%E3%82%93%E8%A7%A3%E8%AA%AC%EF%BC%88%E3%81%9D%E3%81%AE1%EF%BC%89%E3%80%91/ )。

ORUKA1951 · Answer

名前のこと忘れてました。・・プルダウンメニューとか、
HTMLは、表示(プレゼンテーションとは無関係です)
プレゼンテーションはスタイルシートで指定します。
　HTMLの文書構造がきちんとできていたら、どのようにもできるということです。
　→2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

内を次のように書き換えれば、まったく異なるプレゼンテーションが可能。HTMLは触らない。
div.nav{width:10%;position:fixed;left:5px;top:20px;text-align:center;}
div.header,div.section,div.footer{margin-left:20%;}
div.nav ol,div.nav ol li{display:block;lis-style:none;margin:0;padding:0;width:100%;}
div.nav ol li{width:100%;border:solid gray 1px;position:relative;}
div.nav ol li a{display:block;width100%;height:100%;background-color:gray;}
div.nav ol li a:hover{background-color:silver;}
div,nav ol li{position:relative;}
div.nav ol li ol{display:none;position:absolute;left:99%;top:0;}
div.nav ol li ol li ol{display:none;z-index:10;background-color:white;}
div.nav ol li:hover ol{display:block;}
div.nav ol li:hover ol li ol{display:none;}
div.nav ol li:hover ol li:hover ol{display:block;}

この様なスタイルシート(HTMLも)は、オーサリングで作れるものは存在しません。原理的に無理です。文書を読み解き、その文書を構成する要素に分解し、その要素が何であるかをタグでマークアップすることは、知能のある人でなければできません。
　さらに、その文書構造を理解して、セレクタを書く。div.nav（ナビゲーションブロック)中の、ol箇条書きのli項目の中のolは、div.nav ol li ol ですが、これも不可能。
　よって
（HTML直書きなのか？CSSなのか？等）
　いずれも手で書くか、この様なサンプルを理解して自分でHTMLを書き、スタイルシートを書くしかないでしょう。

ORUKA1951 · Answer

　仕組み自体は、極めてシンプルでして・・こんなものツールを使ったらややこしくなります。(^^) 　オーサリングツールじゃ無理でしょう。　階層のあるナビゲーションリストですから、HTMLが次のようにマークアップされているのでしょう。

AAA
BBB 　　　
1. BBB-1 　　　　　
  1. BBB-1-1
  2. BBB-1-2
  3. BBB-1-3
  4. BBB-1-4
  5. BBB-1-5
  6. BBB-1-6
  　　　　
2. BBB-2
3. BBB-3
　　
CCC 　　　
1. CCC-1 　　　　
2. CCC-2 　　　
　　
DDD

　これを、二階層目以下は普段は隠しておいて(display:none)、リスト項目にポインターが乗ると(li:hover)、その下位の項目が表示され---このときそれを囲むブロックは高くなる。さらにそこで表示されたリストに載ると、その下の階層が表示されるが、それはブロックのサイズには影響させないように独立(position:absolute)させる。 ★あくまで、どのように表示させたいからHTMLを書くのではなく、HTMLは文書構造だけをどのように表示させるかを考えずにマークアップすることが、HTMLのもっとも大事なことです。そうすれば、さきでメニューをページのサイドにすべて表示させるとか、プルダウン式のすべてにおいてデザインがずれないようにするとか・・どのようにでも変更できます。なによりも、そのほうがHTMLは無論、スタイルシートも簡単になります。　この仕組みをスタイルシートで書くと、 div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;} div.nav ol{display:block;width:100%;} div.nav ol li{width:22%;float:left;position:relative;} div.nav ol li ol{display:none;} div.nav ol li:hover ol{display:block;} div.nav ol li:hover ol li ol{display:none;} div.nav ol li:hover ol li:hover ol{display:block;position:absolute;left:100%;top:0;width:50%;} div.nav ol li ol li{display:block;width:100%;} div.section{clear:left;} となります。わかりやすいように色をつけたりすると下記のようになります。 ★タブは＿に置換してあるので戻すこと＿＿サンプル＿＿＿＿＿＿

＿＿

タイトル

＿＿

＿＿＿

AAA
BBB ＿＿＿＿＿
1. BBB-1 ＿＿＿＿＿＿＿
  1. BBB-1-1
  2. BBB-1-2
  3. BBB-1-3
  4. BBB-1-4
  5. BBB-1-5
  6. BBB-1-6
  ＿＿＿＿＿＿
2. BBB-2
3. BBB-3
＿＿＿＿
CCC ＿＿＿＿＿
1. CCC-1 ＿＿＿＿＿＿
2. CCC-2 ＿＿＿＿＿
＿＿＿＿
DDD

＿＿

＿

＿＿

見出し

＿＿

・・・

＿

nikoooo · Answer

プルダウンメニュー
ドロップダウンメニュー

http://css-eblog.com/csstechnique/css-8.html
http://technique.eweb-design.com/0902_pdm.html

↓このページ結構参考になると思います。
http://www.geocities.jp/miyake_kobo/kowaza/index.html

too_bad · Answer

ドロップダウンメニューと言います。
prototype.jsを基礎として作ります。
prototypeは以下のURLからダウンロードできます。
http://prototypejs.org/
ドロップダウンメニューの種類は非常に豊富ですので、
まずはインターネット経由で色々と調べてみると良いでしょう。

ホームページ作成

1)二階層目の箇所はsub navigationといいます。

1) プルダウンですかね？

名前のこと忘れてました。

仕組み自体は、極めてシンプルでして・・こんなものツールを使ったらややこしくなります。

プルダウンメニュー

ドロップダウンメニューと言います。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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

　仕組み自体は、極めてシンプルでして・・こんなものツールを使ったらややこしくなります。