【jQuery】ドロップダウンメニューの作り方
今回はJQueryを使ってドロップダウンメニューを作ります。
こんなのですね
ドロップダウンメニューの作り方
フォルダーを作る
階層はこのようになります。
フォルダーを1つ作ります。今回名前は「DropDown」にしました。
その中に「index.html」とフォルダー2つ作ります。
フォルダー名「css」と「js」
「css」フォルダーの中は「style.css」と「リセットcss」
リセットcssは無くても大丈夫ですが、要素の余白などがあって思うような形にならないこともあるのである方が良いかなと思います。
「js」フォルダーの中には記述するjsファイルと「JQuery」本体をJQuery公式サイトからダウンロードしていれます。
【index.html】head
【HTML】
headの中にこのように読み込みます。
このとき記述する順番がとても大事なので気をつけましょう。
リセットcssを先に読み込んで、記述するcssは後に読み込む。
Jquery本体は先に読み込んで記述するjsファイルは後で読み込む。
他にもjqueryが2重に読み込まれている方も時々いらっしゃるので例えばスライダーなど実装してるという方は気をつけましょう。
2重にJquery本体が読み込まれていると上手く動きません。
【index.html】リストの中にリスト
headerにこのようにリストを2重に作ります
分かりにくくて恐縮ですがこんな感じ。
下の方は何でも良いですがテキストを入れておきました。
【style.css】
【.wrapper】で全体を1200pxにしました。
全体が1200pxなので3つに分けて400pxにしました。
【li a】はdisplay:blockで広げておきます。
そうしないと下のような感じになります。
全体をくくっている【ul】.menu
をdisplay:flexで横並びにします。
display:flexは横並びにしたい要素の親要素にかけます。
「MENU1」「MENU2」「MENU3」を横並びにしたいのでその親「.menu」にかけます。
.menu li
にはposition:relative;
その子要素にposition:absolute;を指定しておきます。
script.js
.submenuの li を『hide』メソッドで最初隠しておきます。
コード【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DropDown</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>DropDown</h1>
<nav>
<ul class="menu"><!--メニュー全体-->
<li><a href="#">MENU1</a><!--見出しにrelative-->
<ul class="submenu"><!--直下にabsolute-->
<li><a href="#">menu1a</a></li>
<li><a href="#">menu1a</a></li>
<li><a href="#">menu1a</a></li>
</ul>
</li>
<li><a href="#">MENU2</a>
<ul class="submenu">
<li><a href="#">menu1a</a></li>
<li><a href="#">menu1a</a></li>
<li><a href="#">menu1a</a></li>
</ul>
</li>
<li><a href="#">MENU3</a>
<ul class="submenu">
<li><a href="#">menu1a</a></li>
<li><a href="#">menu1a</a></li>
<li><a href="#">menu1a</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</main>
</div>
</body>
</html>style.css
@charset "utf-8";
.wrapper {
max-width: 1200px;/*全体の幅*/
color: #70735D;
margin: 0 auto;/*中央に寄ってくれる*/
text-align: center;/*文字が中央に寄る*/
}
main {
background-color: #70735D;
}
h1 {
padding: 20px;
font-size: 4rem;
font-family: Arial, Helvetica, sans-serif;
background-color: #034C8C;
color: #F2B705;
}
p {
line-height: 2rem;/*行の高さ*/
color:#F2B705 ;
}
li {
background-color: #F29F05;
line-height: 2rem;
width: 400px;/*全体の幅を1200にしたので400*/
}
li a {
/*display: block;/*要素を広げる*/
color:#034C8C ;
width: 400px;
}
li a:hover {
background-color: #F2B705;
}
.menu {
display: flex;/*横並びにする*/
justify-content: space-around;
}
.menu li {
position: relative;/*見出しにrelative*/
}
.submenu {
position: absolute;/*見出しの直下にabsolute*/
}script.js
$(function() {
//最初隠しておく
$(".submenu").hide();
$("ul.menu li").hover(
function() {
//not(:animated)は必要
$(".submenu:not(:animated)", this).slideDown();
},
function() {
$(".submenu", this).slideUp();
}
);
});するとこんな感じにできます。
広告
