- 締切済み
タブレットのドロップダウンメニューについて
会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。
- oyajin082
- お礼率85% (72/84)
- JavaScript
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
javascriptは色々な問題がありCSSで可能な物はCSSで行ったほうが良いです。特に企業の場合はSEOを考慮すると、javascriptでのナビゲーションは避けるべきです。 「JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。google-ウェブマスター向けガイドライン（品質に関するガイドライン）( https://support.google.com/webmasters/answer/35769?hl=ja#2 )」 HTMLがきちんと書かれていたら、CSSで色々にデザインできます。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ ★ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) ★タブは＿に置換してあるので戻す。 ★リキッドなのでPCでもスマホでも、ウィンドウ幅に関わらずそのまま サンプル <!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 ol{ list-style:none;width:80%;min-width:480px;max-width:840px; margin:0 auto;padding:0; text-align:center; line-height:40px; postion:relative; } div.nav ol li{ width:23%; border:2px solid red; display:inline-block; position:relative; } div.nav ol li ol{ position:absolute; top:42px;left:-2px;width:100%; min-width:0; display:none; } div.nav ol li:hover ol{display:block;} div.nav ol li ol li{width:100%;} div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Products">製品</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Products/A">製品A</a></li> ＿＿＿＿＿＿<li><a href="/Products/B">製品B</a></li> ＿＿＿＿＿＿<li><a href="/Products/C">製品C</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Support">サポート</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Support/A">A</a></li> ＿＿＿＿＿＿<li><a href="/Support/B">B</a></li> ＿＿＿＿＿＿<li><a href="/Support/C">C</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Profile.html">会社情報</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかりませんが、ぐぐってみたらこんな情報がありました。 ひょっとすると…（はずれてたら、すみません） http://blog.activefactor.org/2012/04/%E3%82%BD%E3%83%8B%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%E3%81%A7javascript%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84%E8%AC%8E/
お礼
早々の返事ありがとうございます。 この情報は知りませんでした、こんなこともあるのですね。 参考になりました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
詳しい内容のお返事ありがとうございます。 頂いたソースコードを試してみます。 ありがとうございました。