Q&A
cssでドロップダウンメニューを作りたいんです。
このサイトをもとにドロップダウンメニューの作成を考えています。
http://ooigawa-bitter-sweet.hatenablog.com/entry/2015/04/12/233000
cssだけでjavascriptを使わずに作りたいのですが、不可能でしょうか？
何度かcssだけでドロップダウンメニューを作りましたが、できませんでした。
<a href=>の部分をクリックすると、ページの上部にジャンプします。
原因はドロップダウンメニューのリストに表示したい情報がwebapiから取得する情報だからでなないかと思います。自信を持って言えません笑
コードは以下のとおりです。
サイトのように、<ul><li>を使わずに<table><tr><td>を使用しています。
※css
css
1<style> 2 #contents { 3 overflow: hidden; 4 width: 653px; 5 height: 300px; 6 margin: 0 auto; 7} 8#nav { 9 float: left; 10 list-style: none; 11 width: 108px; 12} 13
※php
PHP
1<?php 2$key='My Key'; 3$count='10'; 4$large_area='〇〇'; 5$start =1; 6$format='xml'; 7$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&large_area='.$large_area.'&start='.$start.'&format='.$format; 8$xml=simplexml_load_file($url); 9$total_count=$xml->results_available; 10if(!$xml->shop){ 11 echo 'we can't find'; 12 } else { 13 foreach($xml->shop as $r){ 14echo '<table>'; 15 echo '<tr>'; 16 echo '<th>'; 17 echo '店名'; 18 echo '</th>'; 19 echo '<td>'; 20 echo $r->name; 21 echo '</td>'; 22 echo '</tr>'; 23 echo '<tr id="contents">'; 24 echo '<th id="nav">'; 25 echo '<a href="#">'; 26 echo 'ジャンル'; 27 echo '</a>'; 28 echo '</th>'; 29 echo '<td colspan="2">'; 30 echo '<a href="#">'; 31 echo $r->genre->catch; 32 echo '</a>'; 33 echo '</td>'; 34 echo '</tr>'; 35 echo '<tr>'; 36 echo '<th>'; 37 echo '禁煙'; 38 echo '</th>'; 39 echo '<td>'; 40 echo $r->non_smoking; 41 echo '</td>'; 42 echo '</tr>'; 43 echo '</table>'; 44 } 45} 46?> 47 48
回答3件
0
ベストアンサー
とりあえず、テーブルでドロップダウンメニューを作ろうとおもったらこんな感じです。
他の方も述べてますがテーブルにこだわる理由がわかりません。
素直にULで実装したほうがらくだと思いますよ。
html
1<html> 2<head> 3<meta charset="utf-8"> 4<title>table menu</title> 5<style> 6table { 7 border-collapse:collapse; 8 float:left; 9} 10table td { 11 width:190px; 12 padding:0; 13 background-color:#000; 14} 15td.nav table { 16 display:none; 17} 18td.nav:hover table { 19 display:block; 20} 21td.nav a { 22 padding:10px; 23 display:block; 24 color:#fff; 25 text-align:center; 26 text-decoration:none; 27} 28td.nav:hover a { 29 background-color:#666; 30} 31td.nav:hover a:hover { 32 background-color:#ccc; 33} 34 35</style> 36</head> 37 38<body> 39 40<table class="menu"> 41 <tr> 42 <td class="nav"><a href="#">メニュー</a> 43 <table> 44 <tr> 45 <td><a href="#">サブメニュー</a></td> 46 </tr> 47 <tr> 48 <td><a href="#">サブメニュー</a></td> 49 </tr> 50 <tr> 51 <td><a href="#">サブメニュー</a></td> 52 </tr> 53 </table> 54 </td> 55 </tr> 56</table> 57<table class="menu"> 58 <tr> 59 <td class="nav"><a href="#">メニュー</a> 60 <table> 61 <tr> 62 <td><a href="#">サブメニュー</a></td> 63 </tr> 64 <tr> 65 <td><a href="#">サブメニュー</a></td> 66 </tr> 67 <tr> 68 <td><a href="#">サブメニュー</a></td> 69 </tr> 70 </table> 71 </td> 72 </tr> 73</table> 74<table class="menu"> 75 <tr> 76 <td class="nav"><a href="#">メニュー</a> 77 <table> 78 <tr> 79 <td><a href="#">サブメニュー</a></td> 80 </tr> 81 <tr> 82 <td><a href="#">サブメニュー</a></td> 83 </tr> 84 <tr> 85 <td><a href="#">サブメニュー</a></td> 86 </tr> 87 </table> 88 </td> 89 </tr> 90</table> 91 92</body> 93</html>
投稿2016/10/01 17:09
総合スコア162
0
cssはスタイル(見た目)を指定するものであって、a要素でどこに飛ばすかなどcssとは別の話です。
投稿2016/10/01 11:18
総合スコア2722
というより、可能らしいのですが、tableの場合、どうやればいいのかわからないんです。
「見た目」は作れます。
tableでやるのはかなり手間ですけど。
1,tableを横に5つ並べる
2,各tableの1行目だけ表示、残りの行は非表示
3,tableマウスオーバーで残り行表示
って感じでしょうか。
はい、そうです。
おっしゃる通りです。
あ、あと躓きそうな点があるとすれば、そのままマウスオーバーでサブメニューを出すと下のコンテンツも下がると思います。
なので、tableにposition:relative;、サブメニューにposition:absolute;を指定して調整してください。
では、がんばってください。
0
そもそも何故、CSSやtableを使用しないといけないのでしょうか？
cssとtableでドロップダウンメニューを作るというのだけが独り歩きしていてどのような実装が理想的かという部分の検証がされていない感じを受けます。
なお、簡単に調べましたがtableでは直にすることができないようです。
ulをうまく使う必要があるようですよ。
投稿2016/10/01 14:41
総合スコア702
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/01 17:16