いつでも医師に相談、gooドクター

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.1 …
<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>

gooドクター

A 回答 (1件)

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




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

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

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


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

fujillinさん、さっそくありがとうございました☆

ご教授のように、topの位置を指定して隙間をなくしたら、

動作が安定して、ボタンがすぐにひっこんだりしなくなりました!

スキマにカーソルが合うなんて、絶対一人じゃ解らなかったです;

fujillinさんが神さまみたいに思えます〜(´;ω;`)ブワッ

画像で作り直すしかないかもと思ってたので、大変助かりましたm(==)m

本当にどうもありがとうございました☆

お礼日時:2015/04/01 17:56

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

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング