jQueryを使ったプルダウンメニューが意図したところに表示されない

「jQueryを使ったプルダウンメニューが意図したところに表示されない」そんなWebデザイン初心者から寄せられた質問に、TechAcademyの現役のプロのメンターが回答しました。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました

大石ゆかり

田島メンター!親要素をマウスオーバーすると子がプルダウンするプログラムを作成してjQueryは動作したのですが、CSSで意図した場所に表示されません。

田島悠介

詳しく状況を教えてもらっていいかな?

 

質問

親(ul li)要素をマウスオーバーすると子(ul li)がプルダウンするプログラムを作成してjQueryは動作しましが、CSSで意図した場所に表示されません。

 

実現したいこと

この画像のように、各親メニューの真横から子メニューがプルダウンするようにしたいです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryでプルダウンメニュー</title>

<style type="text/css">

#menu li {

background-color: #336699;
color: #fff;
width: 100px;
padding: 5px 10px;

}
#menu ul {
display:none;
}
.submenu {

float: left;
clear:both;
width: 150px;

}

</style>

</head>

<body>

<h2>jQueryでプルダウンメニュー</h2>

<ul id="menu">

<li>メニュー1
<ul class="submenu">
<li ><a href="#">サブメニュー1-1</a></li>
<li ><a href="#">サブメニュー1-2</a></li>
<li ><a href="#">サブメニュー1-3</a></li>
</ul>
</li>

<li>メニュー2
<ul class="submenu">
<li><a href="#">サブメニュー2-1</a></li>
<li><a href="#">サブメニュー2-2</a></li>
<li><a href="#">サブメニュー2-3</a></li>
</ul>
</li>

</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
$("#menu li").hover(function() {
$(this).children('ul').show();
}, function() {
$(this).children('ul').hide();
});
});

</script>
</body>
</html>

 

メンターからの回答

サブメニューのドロップダウンをメインメニューの横に表示したい場合には、CSSのpositionプロパティを使用して位置を調整することができます。

たとえばpositionにabsoluteを指定してすると、親要素にpositionプロパティが指定されていない場合には、画面左上を基準として位置を調整できます。また、relativeを指定すると、親要素の左上からの位置調整ができます。

 

メインメニューの右にサブメニューを表示させたい場合は、まず親要素に対してposition:relativeを指定します。

#menu li {
 position:relative;
}

 

さらに、子要素となるサブメニューに対してposition:absolute;を指定します。

.submenu {
  position:absolute;
}

 

この指定をおこなうことで、サブメニューをtop,left,right,bottomというプロパティを使用し、親要素の左上を起点として自由に位置を調整することができます。

下記は一例ですので、調整してみてください。

.submenu {
position:absolute;
top:10px;
left:80px;
}

 

また、メインメニューを開いた時に、メニューの高さが変わってしまう場合には、#menuに対して高さを指定することでサブメニューのみが開くように表示することができます。下記はドロップダウンメニュー開閉の例です。

 

TechAcademyでは現役のプロのメンターが質問にすぐ回答します。

まずは無料体験でメンターに相談してみましょう。