CODEWITHSUNDEEP
phphtmlcsscodeigniter
Amir Rachman
Amir Rachman

Reputation: 225

Make the <li class> to be Active when click submenu

Currently i'm using AdminLTE template for my dashboard, but for the second drop down after i click the the second menu, that menu is not stay but it's closing.

When Cascade

When Cascade

After Click

After Click

Below is my html code. I'm using codeigniter so i use this anchor for .

 <?php if($this->session->userdata('usergroup') == '1' or $this->session->userdata('usergroup') ==  '4') { ?>
    <li class="treeview">
      <a href="#"><i class="fa fa-link"></i> <span>Ticketing</span> <i class="fa fa-angle-left pull-right"></i></a>
      <ul class="treeview-menu">
        <li><?php echo anchor('Bticketing/Ballticket',"<i class='fa fa-circle-o'></i> All Ticket") ?></li>
         <li><?php echo anchor('Bticketingcalendar',"<i class='fa fa-circle-o'></i> Calendar") ?></li>
      </ul>
    </li>
    <?php } ?>

What i want is after i click the all ticket, that menu is stay and show the page. how to do that ?

Note : the default one for active is <li class="treeview active"> but how to make it dynamic to all menu.

Upvotes: 0

Views: 6708

Answers (5)

Dwi Purbo
Dwi Purbo

Reputation: 1

i am using

<li class="treeview <?php if($page == 'YourPage'){echo 'active';}?>" >
    <ul class="treeview-menu">
        <li></li>
        <li></li>
    </ul>
</li>

this is work in my project. $page is variable from your page displayed.

Upvotes: 0

Girjesh
Girjesh

Reputation: 59

$(document).ready(function() {
    var url = window.location;
    // Will only work if string in href matches with location
    $('.treeview-menu li a[href="' + url + '"]').parent().addClass('active');
    // Will also work for relative and absolute hrefs
    $('.treeview-menu li a').filter(function() {
        return this.href == url;
    }).parent().parent().parent().addClass('active');


});

Upvotes: 0

Adnan
Adnan

Reputation: 97

Here is code if you want to create active state on AdminLTE menu

var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
  return this.href == url;
}).parent().addClass('active');

// for treeview
$('ul.treeview-menu a').filter(function() {
  return this.href == url;
}).closest('.treeview').addClass('active');

Hope it will help

Upvotes: 5

Kunal
Kunal

Reputation: 604

On reference website you can see what you are missing actually...

enter image description here

Here onclick of sub-menu you need to add active class

Upvotes: 0

Devidas Kadam
Devidas Kadam

Reputation: 944

use this

<li class="treeview ticketing-tree">
  <a href="#"><i class="fa fa-link"></i> <span>Ticketing</span> <i class="fa fa-angle-left pull-right"></i></a>
  <ul class="treeview-menu">
    <li><?php echo anchor('Bticketing/Ballticket',"<i class='fa fa-circle-o'></i> All Ticket") ?></li>
     <li><?php echo anchor('Bticketingcalendar',"<i class='fa fa-circle-o'></i> Calendar") ?></li>
  </ul>
</li>

Add following JQuery code in your page

<script>
 $(document).ready(function(){
   var href = $(this).attr("href");
   var segment = href.substr(href.lastIndexOf('/') + 1);
   if(segment == 'Ballticket'){
      $('.ticketing-tree').addClass('active');
   }
 }
</script>

Upvotes: 0

Related Questions