CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rajan
Rajan

Reputation: 2425

how to dynamically set the active class in bootstrap navbar?

I am using bootstrap nav bar with codeigniter as backend.

Now In my application i want to change the < li> class to active dynamically for each page.

So i can known i am on which page currently.

Below is my code:

<ul class="nav navbar-nav">
      <li class="active"><a href="<?php echo site_url('admin/dashboard'); ?>">Dashboard</a></li>
        <li><a href="<?php echo site_url('admin/company');?>">Company</a></li>
        <li><a href="<?php echo site_url('admin/user');?>">Users Management</a></li>
        <li><a href="<?php echo site_url('admin/key');?>">Key Management</a></li>
        <li><a href="<?php echo site_url('admin/activation');?>">Activated Devices</a></li>

  </ul>
 <ul class="nav navbar-nav navbar-right">

Upvotes: 7

Views: 32808

Answers (5)

Cirshiss
Cirshiss

Reputation: 91

The jQuery in the accepted answer do not know the difference if the visitor is coming from http://example.com or http://example.com/index.php and would not activate the "home" menu-item. This is my fix for that.

HTML This is a snippet from my menu:

<div class='navbar'>
    <a href='index.php'><div class='nav-icon icon-home'></div>Hem</a>
    <a href='calender.php'><div class='nav-icon icon-calender'></div>Kalender</a>
    <a href='exchange.php#utbyte'><div class='nav-icon icon-byte'></div>Byten</a>
</div>

This is a function I've added to my database controller class to find out what protocol the visitor use:

public static function adr_protocol()
{
    $str = 'http://';
    if(isset($_SERVER['HTTPS']) && 'on' === $_SERVER['HTTPS']) $str = 'https://';
    return $str;
}

jQuery:

;var ix = '<?php echo DBController::adr_protocol()."{$_SERVER['HTTP_HOST']}/"; ?>';
var url = (window.location==ix)?window.location+'index.php':window.location;
$('div.navbar a[href="'+ url +'"]').parent().addClass('active');
$('div.navbar a').filter(function() {
    return this.href == url;
}).addClass('active');

Upvotes: 1

Raghavendra S
Raghavendra S

Reputation: 627

You can achieve it by using jQuery or JavaScript.

jQuery example:

$('.nav li').click(function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
});

Upvotes: 0

Setr&#225;kus Ra
Setr&#225;kus Ra

Reputation: 255

Your pages should know which menu should be set as active.

Try adding an id to your <li> and add a javascript code to your pages to set the active menu based on the ID. Example:

<ul class="nav navbar-nav">
      <li id="menu-dashboard" class="active"><a href="<?php echo site_url('admin/dashboard'); ?>">Dashboard</a></li>
        <li id="menu-company"><a href="<?php echo site_url('admin/company');?>">Company</a></li>
        <li id="menu-user"><a href="<?php echo site_url('admin/user');?>">Users Management</a></li>
        <li id="menu-key-management"><a href="<?php echo site_url('admin/key');?>">Key Management</a></li>
        <li id="menu-activation"><a href="<?php echo site_url('admin/activation');?>">Activated Devices</a></li>
  </ul>

<script>
var menuid = "menu-dashboard";
$(function() {
    $('.nav li').removeClass('active');
    $(menuid).addClass("active");
});
</script>

Pages: Add the following javascript lines to your pages

  • Company page

    menuid = "#menu-company";

  • User page

    menuid = "#menu-user";

Upvotes: 1

Kapil
Kapil

Reputation: 1141

You can use this javascript to add active class based on current url please try it

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location;
        $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
        $('ul.nav a').filter(function() {
             return this.href == url;
        }).parent().addClass('active');
    });
</script>

Upvotes: 17

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6652

Can't you just use this replacing your <a> tags. This will match the current uri string, with the links href attribute. If it matches, it add's an active class to the link. You can style the .active using you

<a href="<?php echo site_url('admin/company'); ?>" class="<?php if($this->uri->uri_string() == 'admin/company') { echo 'active'; } ?>">Company</a>

So the entire code will be.

<ul class="nav navbar-nav">
      <li><a href="<?php echo site_url('admin/dashboard'); ?>" class="<?php if($this->uri->uri_string() == 'admin/dashboard') { echo 'active'; } ?>">Dashboard</a></li>
      <li><a href="<?php echo site_url('admin/company'); ?>" class="<?php if($this->uri->uri_string() == 'admin/company') { echo 'active'; } ?>">Company</a></li>
      <li><a href="<?php echo site_url('admin/user'); ?>" class="<?php if($this->uri->uri_string() == 'admin/user') { echo 'active'; } ?>">Users Management</a></li>
      <li><a href="<?php echo site_url('admin/key'); ?>" class="<?php if($this->uri->uri_string() == 'admin/key') { echo 'active'; } ?>">Key Management</a></li>
      <li><a href="<?php echo site_url('admin/activation'); ?>" class="<?php if($this->uri->uri_string() == 'admin/activation') { echo 'active'; } ?>">Activated Devices</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">

Upvotes: 1

Related Questions