jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

アコーディオン

概要
アコーディオンメニューの実装です。
jQueryでの実装例がよく知られていますが、HTML5+CSS3では以下のコードだけで書けます。
使用方法
JavaScript、html、cssの3つで可能です。
JavaScriptはhtmlの最後に置きます。
備考
これだけで実装できますのでjQueryを使うまでもないですね。

/**
 * アコーディオン
 *
 * @auther ao-system
 */
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init() {
		_toggleMenu.style.height = 'auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click',function(){clickToggle();},false);
	}
	function clickToggle() {
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
})(window,document);
	

<button id="toggleMenuButton">ボタン</button>
<div id="toggleMenu">
	<ul>
		<li>top</li>
		<li>about</li>
		<li>contact</li>
	</ul>
</div>
	

#toggleMenu {
	overflow: hidden;
	transition: all 0.5s;
	background-color: #eee;
}
	
実装例
  • top
  • about
  • contact
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page