Active menu tabs with codeigniter

Question

Which method can be used in Codeigniter to achieve active menu tabs?

For example I have a user menu Profile Friends Messages Logout

When I\'m in th

Answer 1

As you said in your last paragraph, I would just check for the corresponding URI segment and change the style of the tab based on that.

Let's say you're using a foreach statement to generate your menu from a database:

<ul>
<?php foreach($menu_items as $menu_item):?>   
    <li<?php if($this->uri->segment(2) == url_title($menu_item->name, dash, TRUE)):?> class="active"><?php else:?>><?php endif;?><a href="<?=$menu_item->url;?>"><?=$menu_item->name;?></a></li>
<?php endforeach;?>
</ul>

The reason I threw url_title() in there is to make the name lowercase as the URI segment would be and take care of any possible spaces that may be in the menu name and/or URI segment. This would require the URL helper to be enabled. If they don't match, the default CSS for <li> elements would be used.

Answer 2

The tab styling is not a PHP but a CSS issue. Look up hover for color changes. They are often done with ul's, but not always. You can learn a lot here.

As for list generation, a helper would probably be a good idea. You'll probably want the same code available for multiple different controls/methods and views, so having a generic get_menu(); or create_menu(); would be perfect in a helper file. You might want to add it to your MY_html_helper.php.

(Future readers, please read comments)

Answer 3

There is a simple example how to create controller based active menu.

   $ci =& get_instance();

   // get the current controller
   $controller = $ci->router->fetch_class(); 

   // you can generate this array dynamically
   $resources = array(0 => array("controller" => "home", "title" => "Home"),
                      1 => array("controller" => "products", "title" => "Products"),
                      2 => array("controller" => "services", "title" => "Services"),
         );
   <ul>
   <?php foreach($resources as $resource): ?>
   <?php $class = ( $controller == strtolower($resource["controller"]) ? 'active' : 'inactive' ); ?>
      <li><a href="<?php echo site_url($resource["controller"]) ?>" class="<?php echo $class; ?>"><?php echo $resource["title"] ?></a></li>
   <?php endforeach; ?>
   </ul>

Of course, you can create more complex navigation menu based on both controllers and methods.

Answer 4

I had the same issue . Here is my solution:

In each of the controllers, add a parameter in the function

$data['activeTab'] == "profile";
$this->load->view('viewname',$data); (Profile controller)

$data['activeTab'] == "friends";
$this->load->view('viewname',$data); (Friends controller)

$data['activeTab'] == "messages";
$this->load->view('viewname',$data); (Messages controller)

In the view where you have the navigation bar,add a code something like this :

<ul id="menu">
                    <li class="<?php echo ($activeTab == "profile") ? "active" : ""; ?>"><a href="<?php echo base_url(); ?>profile">PROFILE</a></li>
                    <li class="<?php echo ($activeTab == "friends") ? "active" : ""; ?>"><a href="<?php echo base_url(); ?>friends">FRIENDS</a></li>
                    <li class="<?php echo ($activeTab == "messages") ? "active" : ""; ?>"><a href="<?php echo base_url(); ?>messages">MESSAGES</a></li>
    </ul>

This should solve the problem. Tell me if the problem persists.

Thanks