今回は『slideToggle()』を使用したドロップメニューをご紹介します。まずは下のデモをお試し下さい。
○デモ
ボタンをおすと、隠れていたメニューが出てきましたね。それでは早速中身がどうなっているか見てみましょう。
○html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webのタブの名前だよ！</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="div">
<p class="button">押してね</p>
<ul class="menuBox">
<li class="menu">メニュー1</li>
<li class="menu">メニュー2</li>
<li class="menu">メニュー3</li>
<li class="menu">メニュー4</li>
</ul>
</div>
<script src="jquery-2.0.0.min.js"></script>
<script src="common.js"></script>
</body>
</html>
○css
.div {
background-color: #eaeaea;
padding: 20px;
height: 200px; }
.button {
display: block;
width: 200px;
margin: 0 auto;
text-align: center;
background-color: #3ceaff;
color: white; }
.menuBox {
display: none;
list-style: none;
padding: 0; }
.menu {
text-align: center;
width: 200px;
background-color: orange;
margin: 0 auto 4px;
color: white; }
cssの解説です。
| .div | .button | .menuBox | .menu |
|
background–color: #eaeaea; 背景色指定 |
background–color: #3ceaff; 背景色指定 |
display: none; 表を隠しておく |
background–color: orange; 背景色を指定 |
|
padding 余白指定 |
color: white; 文字色指定 |
list–style: none; ul要素の初期スタイルをリセット |
color: white; 文字色指定 |
|
height 全体の高さ指定 |
ボタンの大きさを指定したいため display: block; |
padding: 0; ul要素の初期スタイルをリセット |
width メニューの大きさ指定 |
|
width ボタンの大きさ指定 |
margin: 0 auto 4px; 中央寄せと要素間に4pxの隙間を指定 |
||
|
margin: 0 auto; ボタンの中央寄せ |
text–align: center; ボタン内の文字の中央寄せ |
||
|
text–align: center; ボタン内の文字の中央寄せ |
<ポイント>
・文字の中央寄せとボックスの中央寄せ
・メニューを最初に隠しておくこと
○jquery
$(function() {
$('.button').click(function () {
$('.menuBox').slideToggle();
});
});
jquery解説
・「.button」というクラスをクリックしたら、「.menuBox」というクラスをスライドして表示させる
※「.menuBox」を最初に表示させておくと、クリックで閉じます。
短いコードでも、面白いことができるみたでいですね～。今回は以上です！
ps
今まで画像乗っけてましたが、コード書けばブログ上で動かせることに気づいた。なぜ今まで気づかなかったんや…