ベストアンサー

ホームページ作成

2012/09/09 23:57

http://www.uniqlo.com/jp/ このユニクロのサイトで、ＭＥＮと押すと下にカテゴリが出てきてトップスと押すと、さらに下にカテゴリがでてきます。ツールチップとは違いますよね？そこでまず、この下に出てくる覧を何と呼ぶのか、名前について知りたいのと、もう一つは、ＭＥＮを押して下にカテゴリが出てきた時は下の内容全体が下がりますが、トップスを押した場合はカテゴリが出てきても全体内容は下がりません。これはどうやって作るのでしょうか。以上、 (1)この機能の名称と、(2)それを作る方法（HTML直書きなのか？CSSなのか？等）、の二つをどうか教えてください。

oshietekun1go
お礼率7% (2/27)

CSS
回答数6
ありがとう数0

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

anyhelp
ベストアンサー率43% (79/181)

2012/09/10 01:59 回答No.1

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

その他の回答 (5)

weakweak
ベストアンサー率34% (350/1003)

2012/09/14 04:55 回答No.6

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
ベストアンサー率45% (5062/11036)

2012/09/10 17:29 回答No.5

名前のこと忘れてました。・・プルダウンメニューとか、 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
ベストアンサー率45% (5062/11036)

2012/09/10 15:10 回答No.4

仕組み自体は、極めてシンプルでして・・こんなものツールを使ったらややこしくなります。(^^) 　オーサリングツールじゃ無理でしょう。　階層のあるナビゲーションリストですから、HTMLが次のようにマークアップされているのでしょう。 <div class="nav"> 　<ol> 　　<li><a href="A">AAA</a></li> 　　<li><a href="B">BBB</a> 　　　<ol> 　　　　<li><a href="B/1">BBB-1</a> 　　　　　<ol> 　　　　　　<li><a href="B/1/1">BBB-1-1</a></li> 　　　　　　<li><a href="B/1/2">BBB-1-2</a></li> 　　　　　　<li><a href="B/1/3">BBB-1-3</a></li> 　　　　　　<li><a href="B/1/4">BBB-1-4</a></li> 　　　　　　<li><a href="B/1/5">BBB-1-5</a></li> 　　　　　　<li><a href="B/1/6">BBB-1-6</a></li> 　　　　　</ol> 　　　　</li> 　　　　<li><a href="B/2">BBB-2</a></li> 　　　　<li><a href="B/3">BBB-3</a></li> 　　　</ol> 　　</li> 　　<li><a href="C">CCC</a> 　　　<ol> 　　　　<li><a href="C/1">CCC-1</a> 　　　　<li><a href="C/2">CCC-2</a> 　　　</ol> 　　</li> 　　<li><a href="D">DDD</a></li> 　</ol> </div> 　これを、二階層目以下は普段は隠しておいて(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;} となります。わかりやすいように色をつけたりすると下記のようになります。 ★タブは＿に置換してあるので戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="A">AAA</a></li> ＿＿＿＿<li><a href="B">BBB</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="B/1">BBB-1</a> ＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿<li><a href="B/1/1">BBB-1-1</a></li> ＿＿＿＿＿＿＿＿<li><a href="B/1/2">BBB-1-2</a></li> ＿＿＿＿＿＿＿＿<li><a href="B/1/3">BBB-1-3</a></li> ＿＿＿＿＿＿＿＿<li><a href="B/1/4">BBB-1-4</a></li> ＿＿＿＿＿＿＿＿<li><a href="B/1/5">BBB-1-5</a></li> ＿＿＿＿＿＿＿＿<li><a href="B/1/6">BBB-1-6</a></li> ＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="B/2">BBB-2</a></li> ＿＿＿＿＿＿<li><a href="B/3">BBB-3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="C">CCC</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="C/1">CCC-1</a> ＿＿＿＿＿＿<li><a href="C/2">CCC-2</a> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="D">DDD</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

nikoooo
ベストアンサー率37% (184/490)

2012/09/10 02:32 回答No.3

プルダウンメニュードロップダウンメニュー 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
ベストアンサー率53% (70/130)

2012/09/10 02:01 回答No.2

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