This topic contains 5 replies, has 2 voices, and was last updated by Sean Sean 2 years, 7 months ago.

Sidebar Add "active open" dynamically


  • indrakumars
    Participant

    Posts: 4
    Member Reply #5859

    Hi,

    In Side bar navigation, How can set “active open” dynamically. Actually i use header and footer files to include css and js.

     

    Reference : Bootstrap add active class to li

    • This topic was modified 2 years, 7 months ago by  indrakumars.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5868

    Hi,

    Can you please clarify your question ? Are you loading the content part via ajax ? Or you are developing classic page that loads upon sidebar link click ? If you are doing classic page loading then you will need to set “active open” class when you render the sidebar menu in the server side script. When you generate a page you should adjust the sidebar menu according to the active page’s URL. This is how classic page loading works. If you need any further clarifications please let us know.

    Thanks.


    indrakumars
    Participant

    Posts: 4
    Member Reply #5869

    Hi,

    I am loading the page in classic method. But the HTML HEAD,  NAV BARand SIDEBAR codes are in header.php . i include this header.php in every file. I dont how to set “active open” classes dynamically.

     

    <li class=”nav-item start active open”>

    <i class=”icon-home”></i>

    <span class=”title”>Dashboard</span>

    <span class=”selected”></span>

    <span class=”arrow open”></span>

    <ul class=”sub-menu”>

    <li class=”nav-item start active open”>

     

    <span class=”title”>My Dashboard</span>

    <span class=”selected”></span>

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5870

    Hi,

    You should create sidebar.php and include it in every page similar to header and footer. Then in sidebar.php you can do some checking and set “active open” classes in the HTML code accordingly. You can user page id to detect active link the sidebar menu. This is how classic page loading method implements the HTML parts.

    Thanks.


    indrakumars
    Participant

    Posts: 4
    Member Reply #5874

    Thanks for your reply….

     

    I did go through lot of questions in Stackoverflow and arrived at a solution which may help others….

    The following script adds the classes ‘<span style=”line-height: 1.5;”>active open</span><span style=”line-height: 1.5;”>’ to side bar automatically . It can just be placed next to jquery</span>

    <script  type=”text/javascript”>

    jQuery(document).ready(function() {

    $(‘a[href=”<?php echo basename($_SERVER[‘PHP_SELF’]);?>”]’).parents(“ul.sub-menu”).parent().addClass(“active open”);

    $(‘a[href=”<?php echo basename($_SERVER[‘PHP_SELF’]);?>”]’).parent(“li”).addClass(‘active open’);

     

    });

     

    </script>

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5876

    Hi,

    This solution can work as well. But for best release it better to handle this with server side php code following the common way. However its up to you and it already good as long as it works for you.

    Thanks.

Tagged: 

You must be logged in to reply to this topic.