bootstrap and custom dropdown menu

Question

I'm using bootstrap 3 and I have a page whose contents are dynamically loaded with require_once (). I have a dropdown menu for sections.

<ul class="nav nav-list">
                <li class="active">
                    <a href="<?php echo WEB_ROOT; ?>admin">
                        <i class="menu-icon fa fa-tachometer"></i>
                        <span class="menu-text"> Dashboard</span>
                    </a>

                    <b class="arrow"></b>
                </li>

                <li class="">
                    <a href="#" class="dropdown-toggle">
                        <i class="menu-icon fa fa-desktop"></i>
                        <span class="menu-text"> Catalog </span>

                        <b class="arrow fa fa-angle-down"></b>
                    </a>

                    <b class="arrow"></b>

                    <ul class="submenu">


                <li class="">
                    <a href="<?php echo WEB_ROOT; ?>admin/product/">
                        <i class="menu-icon fa fa-list-alt"></i>
                        <span class="menu-text"> Products </span>
                    </a>

                    <b class="arrow"></b>
                </li>

                    <li class="">
                    <a href="<?php echo WEB_ROOT; ?>admin/category/">
                        <i class="menu-icon fa fa-list-alt"></i>
                        <span class="menu-text"> Categories </span>
                    </a>

                    <b class="arrow"></b>
                </li>   
                    </ul>
                </li>

            </ul>

What I want to do is to keep open the menu when i select a section, moving the <li class = "active"> in the appropriate section. If the pages were static it would be easier, but in this way?

I have no idea how to do it. Here there is a link to demo

Thanks

Answer 1

Set this variable at the top of the page.

<?php $currenturl =  "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>

Try this ternary within each of the class parts of the menu

<?php (WEB_ROOT . 'admin/product/' == $currenturl)? 'active' : NULL ?>

(Obviously change the rest of the path for each of the urls).

If you are wanting to keep a certain drop down open you could have a query string on the end of each url like

<?php echo WEB_ROOT; ?>admin/product?menu=catalog">

And on the page use

<ul class="submenu <?php if(isset($_GET['menu')){ ($_GET['menu'] == 'catalog')? 'open' : NULL; } ?>">

within the class for your catalog submenu. Leaving the menu open :).

Answer 2

You can use a combination of jquery functions after giving the "li's" some name or id :

$("#id").click(function(){
   $("#id").addClass("active);
});

Answer 3

Providing the JS implementation, as @Matt Burrow has covered PHP. As the URL will always match the link that was clicked in the href of the anchor element, we can just make that the active item.

$(function(){
    $('a[href="'+window.location.href+'"]').addClass('active');
});

Although this will certainly break on URL's that have query strings and hashes, of course.