Tuesday, October 19 2021 @ 05:03 PM JST

UIkitのAccordion(折り畳み機能)

  • Sunday, August 02 2015 @ 06:52 PM JST
  • 投稿者:
  • 表示回数 3,705
Geeklog

フロントエンドフレームワーク[tag:UIkit]のAccordion(折り畳み機能)は便利です。 uk-nav-parent-iconで、折り畳みの状態を表示。

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{ multiple: true }">
	<li class="uk-parent">
		<a href="#">DEMO1</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li class="uk-parent">
		<a href="#">DEMO2</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li class="uk-parent">
		<a href="#">DEMO3</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
</ul>
※Geeklogのテンプレートに記述するときは、{ の後にかならず空白を追加してください。{で囲むとテーマ変数処理をするため、その処理をしないようにする必要があります。