http://www.uniqlo.com/jp/
このユニクロのサイトで、MENと押すと下にカテゴリが出てきて
トップスと押すと、さらに下にカテゴリがでてきます。
ツールチップとは違いますよね?
そこでまず、この下に出てくる覧を何と呼ぶのか、名前について知りたいのと、
もう一つは、MENを押して下にカテゴリが出てきた時は下の内容全体が下がりますが、トップスを押した場合はカテゴリが出てきても全体内容は下がりません。
これはどうやって作るのでしょうか。
以上、
(1)この機能の名称と、(2)それを作る方法(HTML直書きなのか?CSSなのか?等)、の二つをどうか教えてください。
No.1ベストアンサー
- 回答日時:
1)二階層目の箇所はsub navigationといいます。
一階層目はprimary navigationです。海外サイトで調べればいいサンプルが出てきます。2)javascriptです。
No.6
- 回答日時:
1) プルダウンですかね?
2) HTMLとCSSを動的に変更する(ページ全体の更新なしに変更する)jqueryという全く別の言語を利用していて、さらに言えばjqueryのライブラリであるjquery UIを利用しているようです(詳しい説明→ http://www.webcreatornote.com/2011/05/jquery-ui% … )。
No.5
- 回答日時:
名前のこと忘れてました。
・・プルダウンメニューとか、HTMLは、表示(プレゼンテーションとは無関係です)
プレゼンテーションはスタイルシートで指定します。
HTMLの文書構造がきちんとできていたら、どのようにもできるということです。
→2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
<!--
-->
内を次のように書き換えれば、まったく異なるプレゼンテーションが可能。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を書き、スタイルシートを書くしかないでしょう。
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">
<!--
div.nav{width:100%;text-align:center;line-height:1.6em;}
div.nav a{text-decoration:none;display:block;width:100%;height:100%;}
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;border:outset 3px gray;}
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.nav ol li a{background-color:yellow;}
div.nav ol li a:hover{background-color:rgb(255,255,200);}
div.nav ol li ol li a{background-color:aqua;}
div.nav ol li ol li a:hover{background-color:rgb(200,255,255);}
div.nav ol li ol li ol li a{background-color:lime;}
div.nav ol li ol li ol li a:hover{background-color:200,255,200);}
div.section{clear:left;background-color:yellow;}
-->
_</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>
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 …
No.2
- 回答日時:
ドロップダウンメニューと言います。
prototype.jsを基礎として作ります。
prototypeは以下のURLからダウンロードできます。
http://prototypejs.org/
ドロップダウンメニューの種類は非常に豊富ですので、
まずはインターネット経由で色々と調べてみると良いでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
更新履歴の作り方
-
ulとliで囲った文字の一部を変...
-
excel vba で ulタグのなかのse...
-
navの横並びにsnsアイコンを付...
-
番号付きリスト(<Ol><Li>・・...
-
divタグ内のコンテンツが重なっ...
-
カルーセルスライダー「slick.j...
-
nth-childが効かない…。原因は...
-
<ul>~</ul>が二つ続くと間に改...
-
文法チェックの<A>と</A>の間が...
-
<ul><li></li></ul>にするメリ...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
CSS「table-cell」で横並びにし...
-
css ol liにdisplay:inlineを設...
-
html/cssの、navを2段にする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
HTMLで組織図を作成する方法
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
htmlの<ol>タグで、数字などを...
-
HTML5のfooterに見出しを付けて...
-
css 横並びのナビゲーションバ...
-
疑似クラス :activeが効きません
-
list-style-type部分だけ大きく...
おすすめ情報