SQLの窓

2016年06月04日


CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味





▲ ハンバーガーアイコンは、メニューに使われるアイコンで3本の横線の形状から『ハンバーガー』と呼ぶようですが、このアイコンをクリックすると真ん中の棒が左へ消えて、上下の棒が回転して『閉じる』アイコンへとアニメーションします
<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_boxh-opened が追加された事をブラウザが検知するとアニメーションが開始され、h-opened が無くなった事を検知すると元へ戻ろうとします。元の状態はアニメーションに関する設定を行う以下の中に定義されています。
#hamburger span {
	/* span の基本属性 */
	background: #999;
	/* div は他で使うかもしれないので、span を利用して block 化 */
	display: block;
	/* 棒の太さ */
	height: 3px;
	/* 3本の棒の位置関係 */
	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 を列挙して、変化に要する時間を定義しています
#hamburger は a 要素ですが、アイコンにする為に display:inline-block となっています。また、真ん中の棒を枠内で消すために overflow:hidden; が定義されています。 a 要素を使う必要は無いのですが、元々 mmenu で解説されていたアイコンなので a 要素を使うと簡単にメニューと連動ができています。
<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;
	/* 3本の棒の位置関係 */
	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>


タグ:CSS jquery
【CSS3の最新記事】
posted by lightbox at 2016-06-04 16:11 | CSS3 | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり