jQuery 横アコーディオンメニュー

水平のアコーディオン(開閉式)メニューを生成

jQuery

$(function () { // デフォルトで1番目を開くようにする // $('ul').eq(0).show(); $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').animate({ width : 'toggle' }, 'normal') }); });

CSS

span { float: left; cursor: pointer; } ul { display: none; float: left; } li { width: 80px; }

HTML

<span>メニュー 1</span> <ul> <li><a href="#">メニュー 1-1</a></li> <li><a href="#">メニュー 1-2</a></li> <li><a href="#">メニュー 1-3</a></li> </ul> <span>メニュー 2</span> <ul> <li><a href="#">メニュー 2-1</a></li> <li><a href="#">メニュー 2-2</a></li> <li><a href="#">メニュー 2-3</a></li> </ul> <span>メニュー 3</span> <ul> <li><a href="#">メニュー 3-1</a></li> <li><a href="#">メニュー 3-2</a></li> <li><a href="#">メニュー 3-3</a></li> </ul>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。