css と簡単なjqueryでメニューを開閉する
久々に時間が取れたので、頭の整理も兼ねて書いてみることにしました。
フロントをメインに仕事をしていますが、cssをうまく利用すると簡単な動きなら表現できることを知ったので、その一例を書いてみます。
今回はヘッダーとかによくあるメニューを作ってみましょう。
目的
ボタンとリストを作成し、ボタンをクリックするとリストが開閉するようにcssとjqueryで調整する。
html
htmlはボタンとリストだけのシンプルなもの、reset.cssの適用をお忘れなく。
<html lang="jp">
<head>
<meta charset="utf-8"/>
<link href="css/reset.css" type="text/css" rel="stylesheet" />
<link href="css/open1.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/open1.js" type="text/javascript"></script>
</head>
<body>
<div class="btn"></div>
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
</body>
</html>
css(scss)
scssでかくとこんな感じです。ポイントは2つあります。
一つ目はulです。height:0;overflow:hidden;をつけることで中身のliが見えなくなります。また、transitionでheightが変更された時に時間をかけて変化してくれます。
もう一つのポイントは&.on(body.on)です。
ここにボタンを押した時の変化を記述します。
body{
width:100%;
height:100%;
background-color: rgb(220,220,220);
.btn{
width:100px;
height:100px;
background-color: blue;
}
ul{
width:200px;
height:0;
overflow: hidden;
transition: height 1s;
li{
width:100%;
height:60px;
border: 1px solid #000;
}
}
&.on{
background-color: rgb(150,150,150);
.btn{
background-color: red;
}
ul{
height:186px;
}
}
}
jquery
かなりシンプルに書いています。ボタンを押した時に、bodyタグにクラスを足すor消すだけ。
$(function(){
$(document).on("click", ".btn", function(){
if(!$('body').hasClass('on')){
$('body').addClass('on');
}else{
$('body').removeClass('on');
}
});
});
動作説明
ボタンを押すとjqueryが発火し、bodyにonのクラスを足します。
すると、cssのbody.onが適用され、下記の変化が起こります。
1.bodyの背景色が変更される
２.ボタンの背景色が変更される
3.ulの高さが変わったため、一秒間のアニメーションをへて変化
もう一度ボタンを押すと元に戻ります。
ね、簡単でしょ？
このように、ボタンのオンオフくらいのアニメーションならcssをメインにするとコード量が減り、jqueryの負担も軽くなります。複数の言語を組み合わせると面白いことが結構あるので、色々試してみるといいでしょう。
次はphpとjqueryを組み合したものを紹介できたらなと思います。
Author And Source
この問題について(css と簡単なjqueryでメニューを開閉する), 我々は、より多くの情報をここで見つけました https://qiita.com/PAmatsuti/items/98716ee7395e384c5ca5著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .