UIKITのサイドバーで子要素を常に展開する方法

はじめに

UIKITではnavコンポーネントを使用することでサイドバーの実装が可能になります
http://getuikit.com/docs/nav.html

また、data-uk-nav属性というのをつけることで子要素の展開/格納が可能になります。いわゆるアコーディオンですね。

そして、uk-activeクラスというのがあり、これがついたクラスは現在選択中ですよみたいな背景色に変わります。

何が問題か

このuk-activeクラスが子要素についている場合。
期待動作としてはその他の要素は全て格納された状態で、uk-activeクラスが子要素にあるものだけ展開された状態であってほしいですよね。
しかし、全ての要素は格納された状態で表示されます。デフォルトで展開したまま表示みたいなオプションはありません。
だけど、そういう要望ってきっとあるはずなので、それを可能にします。

静的なコード

PHPの$_SERVER['REQUEST_URI']とか使うことになるとは思いますが
いきなり書いたらごちゃごちゃして読みづらいのでまずはHTMLオンリーなコードで書きます。
実際の動作サンプルは下記のURLをご覧下さい。
http://codepen.io/qwe001/pen/JKgBBx

<div class="uk-width-medium">
	<div class="uk-panel uk-panel-box">
		<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
			<li class="uk-parent uk-active">
				<a href="#">Parent 1 (Have Nest and Nest is current)</a>
				<ul class="uk-nav-sub uk-nav-side">
					<li class="uk-active">
						<a href="/admin/parent1/nest1">Nest 1 (current)</a>
					</li>
					<li>
						<a href="/admin/parent1/nest2">Nest 2 (not current)</a>
					</li>
					<li>
						<a href="/admin/parent1/nest3">Nest 3 (not current)</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="/admin/parent2">Parent 2 (Not Nest)</a>
			</li>
			<li class="uk-parent">
				<a href="#">Parent 3 (Have Nest but Current nests are nothing)</a>
				<ul class="uk-nav-sub uk-nav-side">
					<li>
						<a href="/admin/parent3/nest1">Nest 1 (not current)</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>

ポイント

親要素のulタグにも「uk-active」クラスをつけていることです。展開/格納のトリガーは「uk-active」クラスのみです。
他のクラスや属性は全て関係ありません。
つまり、デフォルトで展開したい要素と、その親要素の両方に「uk-active」クラスをつければ要望は達成されます。
なお、そのクラスをつけるとCSSの関係で背景色がついて余計なので、それはオーバーライドして消しましょう。

/* Adjust Parent Background Color */
.uk-nav-side > li.uk-parent.uk-active > a {
	background: inherit;
	color: inherit;
}

.uk-nav-side > li.uk-parent.uk-active > a:hover,
.uk-nav-side > li.uk-parent.uk-active > a:focus {
	background: rgba(0, 0, 0, 0.05);
	color: #444;
	outline: none;
}

/* Adjust Parent Child Padding */
.uk-nav-side > li.uk-parent .uk-nav-side > li > a {
	padding-left: 1em;
}

.uk-nav-side > li.uk-parent .uk-nav-side > li.uk-active > a:hover {
	color: #FFF;
}

動的なコード

PHPでわちゃわちゃしていきます。試してはいないですが。

<div class="uk-width-medium">
    <div class="uk-panel uk-panel-box">
        <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
            <li class="uk-parent <?php (preg_match('#^/admin/parent1*#',$_SERVER['REQUEST_URI'])) ? 'uk-active' : '' ?>">
                <a href="#">Parent 1 (Have Nest and Nest is current)</a>
                <ul class="uk-nav-sub uk-nav-side">
                    <li class=" <?php (preg_match('#^/admin/parent1/nest1*#',$_SERVER['REQUEST_URI'])) ? 'uk-active' : '' ?>">
                        <a href="/admin/parent1/nest1">Nest 1 (current)</a>
                    </li>
                    <li class=" <?php (preg_match('#^/admin/parent1/nest2*#',$_SERVER['REQUEST_URI'])) ? 'uk-active' : '' ?>">
                        <a href="/admin/parent1/nest2">Nest 2 (not current)</a>
                    </li>
                    <li class=" <?php (preg_match('#^/admin/parent1/nest3*#',$_SERVER['REQUEST_URI'])) ? 'uk-active' : '' ?>">
                        <a href="/admin/parent1/nest3">Nest 3 (not current)</a>
                    </li>
                </ul>
            </li>
            <li class="<?php (preg_match('#^/admin/parent2*#',$_SERVER['REQUEST_URI'])) ? 'uk-active' : '' ?>">
                <a href="/admin/parent2">Parent 2 (Not Nest)</a>
            </li>
            <li class="uk-parent <?php (preg_match('#^/admin/parent3*#',$_SERVER['REQUEST_URI'])) ? 'uk-active' : '' ?>">
                <a href="#">Parent 3 (Have Nest but Current nests are nothing)</a>
                <ul class="uk-nav-sub uk-nav-side">
                    <li class="<?php (preg_match('#^/admin/parent3/nest1*#',$_SERVER['REQUEST_URI'])) ? 'uk-active' : '' ?>">
                        <a href="/admin/parent3/nest1">Nest 1 (not current)</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Laravel5での書き方

私の場合はPHPフレームワークとしてLaravel5を使用しているので、その場合のコードも書きます。こっちは動作確認済。

<div class="uk-width-medium">
    <div class="uk-panel uk-panel-box">
        <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
            <li class="uk-parent {{ Request::is('admin/parent1*') ? 'uk-active' : '' }}">
                <a href="#">Parent 1 (Have Nest and Nest is current)</a>
                <ul class="uk-nav-sub uk-nav-side">
                    <li class="{{ Request::is('admin/parent1/nest1*') ? 'uk-active' : '' }}">
                        <a href="/admin/parent1/nest1">Nest 1 (current)</a>
                    </li>
                    <li class="{{ Request::is('admin/parent1/nest2*') ? 'uk-active' : '' }}">
                        <a href="/admin/parent1/nest2">Nest 2 (not current)</a>
                    </li>
                    <li class="{{ Request::is('admin/parent1/nest3*') ? 'uk-active' : '' }}">
                        <a href="/admin/parent1/nest3">Nest 3 (not current)</a>
                    </li>
                </ul>
            </li>
            <li class="{{ Request::is('admin/parent2*') ? 'uk-active' : '' }}">
                <a href="/admin/parent2">Parent 2 (Not Nest)</a>
            </li>
            <li class="uk-parent {{ Request::is('admin/parent3*') ? 'uk-active' : '' }}">
                <a href="#">Parent 3 (Have Nest but Current nests are nothing)</a>
                <ul class="uk-nav-sub uk-nav-side">
                    <li class="{{ Request::is('admin/parent3/nest1*') ? 'uk-active' : '' }}">
                        <a href="/admin/parent3/nest1">Nest 1 (not current)</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>