外出自粛中でも楽しく過ごす!QAまとめ>>

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

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

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

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

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

詳しい内容のお返事ありがとうございます。
 
頂いたソースコードを試してみます。

ありがとうございました。

お礼日時:2013/11/01 17:05

よくわかりませんが、ぐぐってみたらこんな情報がありました。


ひょっとすると…(はずれてたら、すみません)

http://blog.activefactor.org/2012/04/%E3%82%BD%E …
    • good
    • 0
この回答へのお礼

早々の返事ありがとうございます。

この情報は知りませんでした、こんなこともあるのですね。

参考になりました。

お礼日時:2013/11/01 17:02

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qjquery ドロップダウンメニューの挙動不審を治す方法

http://makasete-web.net/dropdown-menu

こちらのサイトを元にドロップダウンメニューを作ってみたのですが、
すぐに引っ込んでしまったり、うまく選べません。
jqueryは借りてくるだけなので、内容はわかってないです;
大元のドロップダウンメニューは安定しているようですが、
どこを治せば安定してボタンを選べるようになるでしょうか(´・ω・`)?

ちょっと、長くなっちゃうのですが、こんな感じのメニューで
上段の中2つがドロップダウンします。
よろしくお願い致しますm(==)m


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tesuto</title>
<style type="text/css">
a:link {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
* {
margin: 0px;
padding: 0px;
}
body {
line-height: 180%;
}
header {
text-align: center;
}

nav {
width: 930px;
margin-top: 20px;
}
ul{
list-style-type: none;
padding: 0;
color: #fff;
margin: 0;
}
ul#menu li{
display: block;
padding: 0px;
float: left;
position: relative;
height: 27px;
width: 150px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
color: #FFF;
text-align: center;
background-color: #933;
}
ul#menu li a {
display: block;
color: #FFF;
}
ul.child{
display: none;
position: absolute;
padding: 0;
opacity: 0.9;
background-color: #CCC;
font-size: 14px;
width: 150px;
}
ul.child li a{
display: block;
color: #fff;
}
li a:hover {
background-color: #FFBB00;
color: #FFF;
}
ul#menu2 li {
float: left;
width: 155px;
background-color: #666666;
display: block;
margin-right: 5px;
text-align: center;
height: 26px;
color: #FFF;
}
ul#menu2 li a {
color: #FFF;
display: block;
}
#titlle {
margin-top: 100px;
width: 700px;
}
#navmenu {
width: auto;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#cl2 {
height: 100px;
width: 100%;
float: left;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 3px;
background-color: #FFC;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});
</script>
</head>
<body>
<nav>
<ul id="menu">
<li><a href="#">ご案内</a></li>
<li>ご案内
<ul class="child">
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
</ul>
</li>
<li>ご案内
<ul class="child">
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
</ul>
</li>
<li class="menu"><a href="#">ご案内</a></li>
</ul>
</nav>
<div id="titlle">
<div id="cl2"></div>
<div id="navmenu">
<ul id="menu2">
<li><a href="#a">ご挨拶</a></li>
<li><a href="#i">ご挨拶</a></li>
<li><a href="#u">ご挨拶</a></li>
<li><a href="#e">ご挨拶</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>

http://makasete-web.net/dropdown-menu

こちらのサイトを元にドロップダウンメニューを作ってみたのですが、
すぐに引っ込んでしまったり、うまく選べません。
jqueryは借りてくるだけなので、内容はわかってないです;
大元のドロップダウンメニューは安定しているようですが、
どこを治せば安定してボタンを選べるようになるでしょうか(´・ω・`)?

ちょっと、長くなっちゃうのですが、こんな感じのメニューで
上段の中2つがドロップダウンします。
よろしくお願い致しますm(==)m


<!doc...続きを読む

Aベストアンサー

スクリプトそのものは単純で、指定のLI要素に対してマウスエンターでスライドダウン、マウスリーブでスライドアップという内容になっています。


>すぐに引っ込んでしまったり、うまく選べません。

ご提示のソースを表示してみると、親メニューと子メニューの間に隙間ができていますので、そこをマウスが通るとマウスリーブとなって、メニューが閉じるという事象が発生します。
マウスを素早く動かすと、うまくいけば子要素のLIへのマウスエンターが間に合って、表示されたままとなります。
ご質問の「安定しない」とはこれではないかと推測しました。

スクリプトを修正して対応することも不可能ではないでしょうが、レイアウトの方法を修正する方が遥かに簡単そうです。
(スクリプトの修正で対応するにしても、レイアウトの方法を変えた方がやりやすそうに思います)


要は、隙間部分をなくすか、隙間を設けるにしてもその部分をLI要素の一部として評価されるようなレイアウトになさればよろしいのではないでしょうか。
一番簡単なのは、
 ul.child{ top:27px; }
みたいに、位置を明示的に指定することで隙間をなくしてしまえば、とりあえずはご期待の動作になるのではないかと推測します。

スクリプトそのものは単純で、指定のLI要素に対してマウスエンターでスライドダウン、マウスリーブでスライドアップという内容になっています。


>すぐに引っ込んでしまったり、うまく選べません。

ご提示のソースを表示してみると、親メニューと子メニューの間に隙間ができていますので、そこをマウスが通るとマウスリーブとなって、メニューが閉じるという事象が発生します。
マウスを素早く動かすと、うまくいけば子要素のLIへのマウスエンターが間に合って、表示されたままとなります。
ご質問の「...続きを読む


人気Q&Aランキング