タブレットのドロップダウンメニューについて

締切済

質問者：oyajin082
質問日時：2013/10/28 15:29
回答数：2件

会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。

しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。

メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。

商品のところはドロップダウンで20個程表示されます。

Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。

タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。

サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。

アドバイスよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2013/10/28 19:35

javascriptは色々な問題がありCSSで可能な物はCSSで行ったほうが良いです。

特に企業の場合はSEOを考慮すると、javascriptでのナビゲーションは避けるべきです。
「JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキストブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。google-ウェブマスター向けガイドライン（品質に関するガイドライン）( https://support.google.com/webmasters/answer/357 … )」

　HTMLがきちんと書かれていたら、CSSで色々にデザインできます。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

★ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
★タブは＿に置換してあるので戻す。
★リキッドなので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">

＿</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>