qwe001 qwe001 - 3 months ago 29
CSS Question

How to do UIKIT nav accordion always open?

I make a sidebar with UIKIT Nav component.

http://getuikit.com/docs/nav.html

That could be able to make accordion like this.

<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
<a href="#">parrent</a>
<ul class="uk-nav-sub uk-nav-side">
<li class="uk-active">
<a href="#">current</a>
</li>
<li>
<a href="#">not current</a>
</li>
</ul>
</li>
</ul>


If I click accordion menu. Tag will change it.

<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent uk-open" aria-expanded="true">
<a href="#">parent</a>
<div style="overflow: hidden; position: relative;">
<ul class="uk-nav-sub uk-nav-side">
<li class="uk-active">
<a href="#">current</a>
</li>
<li>
<a href="#">not current</a>
</li>
</ul>
</div>
</li>
</ul>


If I do page reload, All accordion will close.

So what do I wanna ask you the question is how to always open when the request-url is current?
I wanna always open the parent ul tag that nest class uk-active li tag.

I think that will be able with jQuery or PHP.

any ideas?

Answer

I'm sorry to reply this too late.

Finally, I understand always open trigger is 'uk-active' class.

There are no relation with 'uk-open', aria-expanded="true" or div bla bla bla.

Just set 'uk-active' class on element you wanna always show it. So, This is my solution.

http://codepen.io/qwe001/pen/JKgBBx

And ya, Need to use $_SERVER['REQUEST_URI'] to set uk-active class. Btw, I use php framework Laravel5. So my code is like this.

<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>

NOTE: Must need adjust parent uk-parent class color.