実行例
ソース
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="">
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
</li>
</ul>
※リンク2のように、target="_blank"を指定するとリンク先が別のタブで開きます。
概要
リストを開くと中からヌルっと子要素があらわれる様子がアコーディオンの蛇腹部分に見えることから、正式にはアコーディオンメニューと呼ばれているようです。知らんけど。
ヌルヌル成分が不足しがちなWiki3においてアコーディオンメニューは見た目も機能もバツグンの性能を誇っとります。
コスパのわりに汎用的につかえるので取りあえずメニューリスト設置しときたいときに便利です。
解説
箇条書き要素<ul class="uk-nav … data-uk-nav="">～</ul>（具体的に、1行目～最終行）の間に囲まれた部分がアコーディオンメニューになります。この間に箇条書きに関係ない要素を入れることはできません。
2行目～最終行の一行手前までの部分が蛇腹の親要素、楽器のアコーディオンでいうところの持ち手です。間に蛇腹を挟むことで初めて開閉できるようになります。
リストを開いたときの項目を増やす
リンク1、リンク2と重なっている部分の下に上の行をコピペしていくことでリストの中身を増やしていけます。
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="">
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
<li><a href="https://wiki3.jp/wikiteku">リンク3</a></li>
<li><a href="https://wiki3.jp/wikiteku">リンク4</a></li>
</ul>
</li>
</ul>
ただし、こういうことはできません。
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="">
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku">リンク2</a></li>
</ul>
</li>
</ul>
開閉可能なリストを増やす
class="uk-parent"で指定された部分ごとコピペするといい感じになります。
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="">
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
</li>
</ul>
開閉できないリストを増やす
そういうことなら<ul></ul>で囲まずに単に<li></li>で囲まれた部分を追加します。
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="">
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
</li>
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
ただし、上記2パターンでは二つのリストを同時に開くことはできません。
二つ以上のリストを独立に開閉させる
二つ以上のリストを同時に開かせるようにするにはいくつか方法がありますが、一番簡単な方法は一行目の最後の
data-uk-nav=""
の部分に
data-uk-nav="{multiple:true}"
と打ち込んでやればOKです。
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#">折りたたみ式リストの例</a>
<ul class="uk-nav-sub">
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
</li>
<li><a href="https://wiki3.jp/wikiteku">リンク1</a></li>
<li><a href="https://wiki3.jp/wikiteku" target="_blank">リンク2</a></li>
</ul>
コメント
最新を表示する
NG表示方式
NGID一覧