メニュー-Menu







 ①開閉メニュー  ☆ソース <div data-role="collapsible"> <h3>開閉メニュー1</h3> <p>ド~はドーナツのド~</p> </div> <div data-role="collapsible"> <h3>開閉メニュー2</h3> <p>レ~はレモンのレ~</p> </div> <div data-role="collapsible"> <h3>開閉メニュー3</h3> <p>ミ~はみんなのミ~</p> </div>  デモ

開閉メニュー1

ド~はドーナツのド~

開閉メニュー2

レ~はレモンのレ~

開閉メニュー3

ミ~はみんなのミ~



 ②アコーディオンメニュー  ☆ソース <div data-role="collapsible-set"> <div data-role="collapsible"> <h3>アコーディオンメニュー1</h3> <p>ド~はドーナツのド~</p> </div> <div data-role="collapsible"> <h3>アコーディオンメニュー2</h3> <p>レ~はレモンのレ~</p> </div> <div data-role="collapsible"> <h3>アコーディオンメニュー3</h3> <p>ミ~はみんなのミ~</p> </div> </div>  デモ

アコーディオンメニュー1

ド~はドーナツのド~

アコーディオンメニュー2

レ~はレモンのレ~

アコーディオンメニュー3

ミ~はみんなのミ~



 ③メニューごとに、テーマを分けて 色分けをすることも可能。  ☆ソース <div data-role="collapsible-set"> <div data-role="collapsible" data-theme="a"> <h3>アコーディオンメニュー1</h3> <p>ド~はドーナツのド~</p> </div> <div data-role="collapsible" data-theme="b"> <h3>アコーディオンメニュー2</h3> <p>レ~はレモンのレ~</p> </div> <div data-role="collapsible" data-theme="e"> <h3>アコーディオンメニュー3</h3> <p>ミ~はみんなのミ~</p> </div> </div>  デモ

アコーディオンメニュー1

ド~はドーナツのド~

アコーディオンメニュー2

レ~はレモンのレ~

アコーディオンメニュー3

ミ~はみんなのミ~



 ④メニューに階層をつけたり、組み合わせることも可能。  ☆ソース <div data-role="collapsible-set"> <div data-role="collapsible" data-theme="a"> <h3>アコーディオンメニュー1</h3> <p>ド~はドーナツのド~</p> </div> <div data-role="collapsible" data-theme="b"> <h3>アコーディオンメニュー2</h3> <p>レ~はレモンのレ~ <div data-role="collapsible" data-theme="c"> <h3>アコーディオンメニュー2-1</h3> <p>ファ~はファイトのファ~</p> </div> <div data-role="collapsible" data-theme="d"> <h3>アコーディオンメニュー2-2</h3> <p>ソ~はソースのソ~</p> </div> </p> </div> <div data-role="collapsible" data-theme="e"> <h3>アコーディオンメニュー3</h3> <p>ミ~はみんなのミ~</p> </div> </div>  デモ

アコーディオンメニュー1

ド~はドーナツのド~

アコーディオンメニュー2

レ~はレモンのレ~

アコーディオンメニュー2-1

ファ~はファイトのファ~

アコーディオンメニュー2-2

ソ~はソースのソ~

アコーディオンメニュー3

ミ~はみんなのミ~