CodeIgniter: how to "highlight" a link to the page on which the user is currently logged on?

Question

Pretty new to CodeIgniter, the still exciting MVC approach. I'm just wondering what the best way to solve this problem is:

I got my navigation bar by highlighting the current active link:

<a href="index.hml" id="active">Index</a> <a href="blog.hml">Blog</a> 

Now that I go to blog.html, I want id = "active" to move accordingly. I usually assign a variable to each link, and then set its value to “id =" active. For some reason, I don't think this is the best way. Any thoughts?

Update (September 12, 2012) . Asking about this, I switched to Kohana and expanded the module, which was created completely for this purpose. Now all I have to do is specify my menu items in the config array, and the selection happens automatically. The module is here .

Answer 1

First of all, you should not use id for this kind of thing, id should indicate a unique identification number for each DOM element on the page, for which we use the class best.

Code Igniter provides a lot of helpers and classes that become part of our tools, you may already have heard of "URL segments".

$ this-> uri-> Segment (n )

Lets you get a specific segment. Where n is the number of the segment you want to get. Segments are numbered from left to right. For example, if your full URL is:

http://example.com/index.php/news/local/metro/crime_is_up

Segment numbers will be as follows:

• news
• local
• underground
• crime_is_up

http://codeigniter.com/user_guide/libraries/uri.html

you can use this to retrieve the current URL segment that represents the active page that you are actually displaying in the browser.

Answer 2

Nonspecific for CI, it is just a logical check, again calls the name of the current page.

When you get the page name in CI, for example

 $pageName = 'blog.html'; 

Then you can do the following

 <a href="index.html" <?php echo $pageName == 'index.html' ? 'id="active"' : ''; ?>>Index</a> <a href="blog.html" <?php echo $pageName == 'blog.html' ? 'id="active"' : ''; ?>>Blog</a> 

Answer 3

I used the @Calle example, it worked very well ... I had to use a custom url-grabber instead of CI current_url (), since I am bypassing the index.php file with .htaccess. I also added the correct attribute tag.

Notes for beginners I broke this file in the "helpers" called "menu_helper.php" and uploaded it via the controller $ this-> load-> helper ('menu');

helpers / menu _helper.php

 if ( ! function_exists('menu_anchor')) { function menu_anchor($uri = '', $title = '', $attributes = '') { $title = (string) $title; if ( ! is_array($uri)) { $site_url = ( ! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri; } else { $site_url = site_url($uri); } if ($title == '') { $title = $site_url; } if ($attributes != '') { $attributes = _parse_attributes($attributes); } $current_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; $attributes .= ($site_url == $current_url) ? 'class="active"' : 'class="normal"'; return '<a href="'.$site_url.'"'.$attributes.'>'.$title.'</a>'; } } 

View file:

 <ul class="topnav love"> <li class="topnav-1"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> <li class="topnav-2"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> <li class="topnav-3"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> <li class="topnav-4"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> <li class="topnav-5"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> </ul> 

css:

ul.topnav li.topnav-1 a.active {something smart}

Answer 4

I use the code below - greetings!

 <?php echo ($this->uri->segment(1)=='dashboard' && $this->uri->segment(2)=='')? 'active' : ''; ?> 

Answer 5

I saw from the comment above that you might be looking for something more compact. By default, Codeigniter does not have such a function, but it is quite simple to do. This is what I put together now, but it may be what you want to have.

Check out the URL helper in the guide first. http://codeigniter.com/user_guide/helpers/url_helper.html

Look specifically at the binding function and understand how to use it. You should be in the habit of using this helper, HTML helper and form helper. It will improve your looks. All helpers are available for us in the system folder. I just opened the URL helper and copied the anchor code, and then created my own helper file in a helper folder in the application. You can learn more about creating your own helpers and loading them automatically in the manual.

Then I made a few changes. The final result is as follows:

 if ( ! function_exists('menu_anchor')) { function menu_anchor($uri = '', $title = '', $attributes = '') { $title = (string) $title; if ( ! is_array($uri)) { $site_url = ( ! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri; } else { $site_url = site_url($uri); } if ($title == '') { $title = $site_url; } if ($attributes != '') { $attributes = _parse_attributes($attributes); } $attributes .= ($site_url == current_url()) ? ' selected' : ''; return '<a href="'.$site_url.'"'.$attributes.'>'.$title.'</a>'; } } 

As you can see, this is just a one-line modification: $ attributes. = ($ site_url == current_url ())? 'selected': '';

Basically, if the URL of the loaded page matches the file to which the binding is attached, it adds the selected class. If you do not want the selected link to link anywhere, you can easily fix this by setting $ site_url to # or something else.