メニューボタン

仕様

名称

メニューボタン

概要

ボタンをクリックすると指定されているタグが開閉されるプログラムです。

ライブラリ

jQuery(ダウンロード

デモンストレーション

設置方法

HTML

<div><button type="button" id="menubutton"><img src="/img/icon/menu-4x.png" alt="メニュー"></button></div>
<div id="menudemo">デモンストレーションデモンストレーション</div>

CSS

#menubutton {
	-webkit-appearance: none;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	cursor: pointer;
}

#menudemo {
	display: none;
}

JavaScript

$(function(){
	$('#menubutton').click(function(){
		//250=開閉される速さ(単位:ms)
		$('#menudemo').slideToggle(250);
	});
});