▲ ハンバーガーアイコンは、メニューに使われるアイコンで３本の横線の形状から『ハンバーガー』と呼ぶようですが、このアイコンをクリックすると真ん中の棒が左へ消えて、上下の棒が回転して『閉じる』アイコンへとアニメーションします
<div id="test_box"> ハンバーガアイコン <a id="hamburger"> <span class="top-bar"></span> <span class="middle-bar"></span> <span class="bottom-bar"></span> </a> </div>
アニメーションの発動 これに関してのみ jQuery のイベント処理を使っていますが、アニメーションに関しては全て CSS で定義されています。jQuery(JavaScript) で行う処理は、『h-opened』というクラスを #hamburger の親に設定するだけです。また、既に 『h-opened』が設定済みの場合はクラスを削除します。このスイッチのみの作成に jQuery(JavaScript) を使用しています アニメーションの開始 アニメーションの最終状態は CSS で定義されています。以下の定義がアニメーションした結果、どうなるかという部分です。
#test_box.h-opened #hamburger span.top-bar {
transform: rotate( 45deg );
top: 8px;
}
#test_box.h-opened #hamburger span.middle-bar {
opacity: 0;
left: -40px;
}
#test_box.h-opened #hamburger span.bottom-bar {
transform: rotate( -45deg );
top: -8px;
}
#test_box に h-opened が追加された事をブラウザが検知するとアニメーションが開始され、h-opened が無くなった事を検知すると元へ戻ろうとします。元の状態はアニメーションに関する設定を行う以下の中に定義されています。
#hamburger span {
/* span の基本属性 */
background: #999;
/* div は他で使うかもしれないので、span を利用して block 化 */
display: block;
/* 棒の太さ */
height: 3px;
/* ３本の棒の位置関係 */
margin: 5px 0 5px 0;
/* 位置指定可能 */
position: relative;
/* 変化するプロパティの初期値 */
transform: rotate( 0 );
top: 0;
left: 0;
opacity: 1;
/* 変化するプロパティ */
transition-property: transform, top, left, opacity;
/* 変化に要する時間 */
transition-duration: 0.5s;
}
- 1) 最初にアニメーションする span 要素の形状を定義しています。
- 2) 次に、アニメーションする前の初期状態を決定しています。この状態からアニメーション後の状態へと少しづつ変化させて動くわけです
- 3) 最後に、アニメーションする対象となる transition-property を列挙して、変化に要する時間を定義しています
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
$("#hamburger").on( "click", function(){
if ( $("#test_box").hasClass("h-opened") ) {
$("#test_box").removeClass("h-opened");
}
else {
$("#test_box").addClass("h-opened");
}
} );
});
</script>
<style>
/* 枠 */
#hamburger {
/* アニメーションで真ん中の棒を隠す為 */
overflow: hidden;
border: 1px solid #999;
/* 行中で使用する為 */
display: inline-block;
/* 行中内の幅は必要 */
width: 30px;
/* ハンバーガアイコンの内部余白 */
padding: 4px 8px 4px 8px;
/* クリック可能カーソル */
cursor: pointer;
}
#hamburger span {
/* span の基本属性 */
background: #999;
/* div は他で使うかもしれないので、span を利用して block 化 */
display: block;
/* 棒の太さ */
height: 3px;
/* ３本の棒の位置関係 */
margin: 5px 0 5px 0;
/* 位置指定可能 */
position: relative;
/* 変化するプロパティの初期値 */
transform: rotate( 0 );
top: 0;
left: 0;
opacity: 1;
/* 変化するプロパティ */
transition-property: transform, top, left, opacity;
/* 変化に要する時間 */
transition-duration: 0.5s;
}
#test_box.h-opened #hamburger span.top-bar {
transform: rotate( 45deg );
top: 8px;
}
#test_box.h-opened #hamburger span.middle-bar {
opacity: 0;
left: -40px;
}
#test_box.h-opened #hamburger span.bottom-bar {
transform: rotate( -45deg );
top: -8px;
}
</style>
<div id="test_box">
ハンバーガアイコン
<a id="hamburger">
<span class="top-bar"></span>
<span class="middle-bar"></span>
<span class="bottom-bar"></span>
</a>
</div>
|
|
【CSS3の最新記事】
- CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する
- CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました
- CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説
- 『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する
- フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。
- Google ストリートビューを表示している class="gm-style"
- linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)
- 現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述
- CSS3 : box-shadow の影分身の解説
- CSS で画像が立ってるような影を付けて、画像の角は丸くしておく
- IE 兼用背景 Fade transition の実装
- CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )
- CSS3 と HTML5 で実装具合の表示テスト
- ブラウザ別の角丸とグラデーションの適用状態の比較画像
- CSS3 の borderRadius で、四角から円へのモーフィング
- CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript
