ポップアップメニューを作成しているのですが、縦1列や横1列にメニューを出したり、縦にでてさらに次の階層までのメニューは、検索するとサンプルがあるのですが、縦6列、横4行の表のようなものをポップアップメニューで表示させたいと思っています。
サンプルになるページがあればと思って検索しましたが見つかりませんでした。
このようなことはできないでしょうか。
参考になるページを変更してみたりしてのですがCSSファイルの修正がうまくできず動作しなくなったりします。参考にしたページはこちらです。
http://www.coolwebwindow.com/csstips/csstechnic/ …
この参考にしたページの内容に関係なくどういう形でもよいのでご教授お願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
>「全ての製品」をクリックすると下記のような表がポップアップで表示されるようにしたいと思っています。
言葉通りの動作をさせるなら、javascriptを使用するべきでしょう。
スタイルシートには、onClickに対応する動作はありません。もしスタイルシートで行うなら、:hover(ポインターをあわせると)で、メニューが表示されるか方式でしょう。
クリックして表示させるには、あらかじめ表示領域を確保しておいて、何らかの画像なりを表示させてクリックするとページ内アンカーで表示部を移動させることになります。
<nav>
<ol>
<li>トップ</li>
<li>新製品
<ol>
<li></li>
</ol>
</li>
<li id="product">製品情報
<ol>
<li><a href="">製品1</a>
<ol>
<li><a href="">特徴</a></li>
<li><a href="">詳細</a></li>
<li><a href="">機能一覧</a></li>
</ol>
</li>
<li><a href="">製品2</a>
<ol>
<li><a href="">特徴</a></li>
<li><a href="">詳細</a></li>
<li><a href="">機能一覧</a></li>
</ol>
</li>
<li><a href="">製品3</a>
<ol>
<li><a href="">特徴</a></li>
<li><a href="">詳細</a></li>
<li><a href="">機能一覧</a></li>
</ol>
</li>
</ol>
</li>
<li>略</li>
</div>
</nav>
として、navを縦・横を決めて配置してoverflow:hiddenで他の部分を隠します。#productが選択(クリック)されると、内容がスクロールされて、同じページに現れる。
No.1
- 回答日時:
デザインのために、HTMLを探そうとするから失敗するのです。
そもそも、表のように並べたいということは、文書の意味的な構造も表的なものだと思います。あるいは、単なる階層をもつリストであったとしても、表のようにプレゼンテーションしたほうがわかりやすい構成だと思います。
まず、どのような文書構造なのかを率直にマークアップしてください。--プレゼンテーションは考えないくらいのつもりで。
<nav>
<ol>
<li><a href="">製品1</a>
<ol>
<li><a href="">特徴</a></li>
<li><a href="">詳細</a></li>
<li><a href="">機能一覧</a></li>
</ol>
</li>
<li><a href="">製品2</a>
<ol>
<li><a href="">特徴</a></li>
<li><a href="">詳細</a></li>
<li><a href="">機能一覧</a></li>
</ol>
</li>
<li><a href="">製品3</a>
<ol>
<li><a href="">特徴</a></li>
<li><a href="">詳細</a></li>
<li><a href="">機能一覧</a></li>
</ol>
</li>
</ol>
</nav>
★HTML4.01だったら、<div class="nav"></div>ですかね。
だとしたら、各項目にほぼ同数の項目からなるリストがあり、それらの順番が意味を持つ(一行目は特徴、二列目は詳細・・・)ですから、序列リストでマークアップしておきます。
これを、表的なポップアップメニューにすることは容易ですね。もちろん、縦並びのポップアップにも、横並びのプルダウン、あるいは、メニュー詳細は大きな枠中にその製品の写真の上に表示するなど・・・どのようにもデザインできます。
まず、率直にHTMLをお書きなさい。それをどのようにプレゼンテーションしたいかを、質問されると良いでしょう。
HTML5を目前に控えた現在、この文書構造とプレゼンテーションの分離はとても重要な基本です。ただ、以前よりずっと楽になることも事実です、頑張ってください。
早速のご回答有難うございます。
イメージとしましては、メニューにある「全ての製品」をクリックすると下記のような表がポップアップで表示されるようにしたいと思っています。
できればCSSで定義できないかと思っています。
全ての製品
製品1 特徴 詳細 機能一覧 その他
製品2 特徴 詳細 機能一覧 その他
製品3 特徴 詳細 機能一覧 その他
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Word(ワード) Word2013 縦書き上下二段の表、改行を続けると次ページに情報が表示されるようにしたい 3 2022/06/16 09:24
- PDF AdobeAcrobatでWEBページを丸ごとPDF化 4 2022/05/12 12:22
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- SEO 意図しないページが検索ヒットする問題 2 2022/05/19 14:35
- PHP PHP ページング データベース 1 2022/06/16 10:30
- ノートパソコン ページ番号の入れ方について 3 2023/02/16 17:11
- SEO 検索エンジン反映遅い 1 2022/06/04 07:35
- SEO 検索エンジンにインデックスされない 3 2023/02/20 08:59
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
cssの display: flex;で横並び...
-
「CSS」リストの2段組どのよう...
-
リストの数字のフォントサイズ...
-
li 長さ指定
-
[CSS3] last-childについて
-
メニューの折り畳み階層化について
-
リストの回り込みについて(マ...
-
header と nav の隙間を埋めたい。
-
<ul>と<li>リストマークを消す...
-
画像はDIVタグとPタグの両方で...
-
list-style-type部分だけ大きく...
-
ドロップダウンメニューが隠れ...
-
<ul>~</ul>が二つ続くと間に改...
-
<table>の高さ固定。情報増加時...
-
<ol><li> 左側にスペースがで...
-
ulタグやliタグの中でbrタグ...
-
ページを開いているときのリン...
-
liタグを改列させたい。
-
リンク文字同士の間隔を開ける...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報