会社のWebの管理をしていますが、5年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。
しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。
メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。
商品のところはドロップダウンで20個程表示されます。
Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。
タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。
サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。
アドバイスよろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
よくわかりませんが、ぐぐってみたらこんな情報がありました。
ひょっとすると…(はずれてたら、すみません)
http://blog.activefactor.org/2012/04/%E3%82%BD%E …
No.2
- 回答日時:
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">
<!--
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング ログインしないとみることができないWebページの作成方法 3 2023/07/29 13:33
- その他(プログラミング・Web制作) WEBアプリ開発に必要な言語 5 2023/06/28 16:57
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- WordPress(ワードプレス) Wordpress テーマを編集 の編集する枠が表示されない 2 2022/11/19 11:07
- タブレット ipadとその他のタブレット(android)だと、どちらのほうが使いやすいですか? 4 2023/06/24 07:55
- PHP 掲示板のセキュリティについてアドバイスお願い致します 1 2023/08/11 20:44
- Android(アンドロイド) androidタブレットに写真 6 2023/04/15 23:59
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- ホームページ作成・プログラミング パスワードつきホームページ トップページ以下はどうなる 6 2022/08/16 12:04
- Excel(エクセル) 【エクセル】文中に別シートのセルの内容を自動入力したい 6 2022/11/17 11:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで、リンクURLの一致を確...
-
【javascript で動的に a タグ...
-
【短い】1つだけ展開/表示/非表...
-
javascriptで教えてください。 ...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
JavaScriptのクッキーによるリ...
-
文字と数字が混在する要素のsor...
-
多階層ドロップダウンのスマホ...
-
どの<li><a> が押されたか判別...
-
javascriptでEnterキーをtabキ...
-
Jquery の slide.toggle で要素...
-
「jQuery」アコーディオンメニ...
-
Jqueryでリストのスクロール
-
javascriptで正規表現の検索が...
-
jquery ドロップダウンメニュー...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
Slick.jsのオプションrtlについて
-
jQueryで同じクラス名のものを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報