jQueryを使ったプルダウンメニューが意図したところに表示されない
「jQueryを使ったプルダウンメニューが意図したところに表示されない」そんなWebデザイン初心者から寄せられた質問に、TechAcademyの現役のプロのメンターが回答しました。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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では現役のプロのメンターが質問にすぐ回答します。
まずは無料体験でメンターに相談してみましょう。
