久々に時間が取れたので、頭の整理も兼ねて書いてみることにしました。
フロントをメインに仕事をしていますが、cssをうまく利用すると簡単な動きなら表現できることを知ったので、その一例を書いてみます。
今回はヘッダーとかによくあるメニューを作ってみましょう。
目的
ボタンとリストを作成し、ボタンをクリックするとリストが開閉するようにcssとjqueryで調整する。
html
htmlはボタンとリストだけのシンプルなもの、reset.cssの適用をお忘れなく。
index.html
<htmllang="jp"><head><metacharset="utf-8"/><linkhref="css/reset.css"type="text/css"rel="stylesheet"/><linkhref="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><divclass="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)です。
ここにボタンを押した時の変化を記述します。
open1.scss
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:height1s;li{width:100%;height:60px;border:1pxsolid#000;}}&.on{background-color:rgb(150,150,150);.btn{background-color:red;}ul{height:186px;}}}jquery
かなりシンプルに書いています。ボタンを押した時に、bodyタグにクラスを足すor消すだけ。
open1.scss
$(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を組み合したものを紹介できたらなと思います。