Using dynamic menus with Codeigniter?

[eluser]Solarpitch[/eluser]
Hi,

I have this little problem I'm trying to figure out. I have a tabular menu in my header.php file. Anytime a page is selected the style of the tab will change (ie. the tab will be highlighted for that specific page)

I simply use class='active' and class='nonactive' to define which tab should be highlighted.

eg: if the user was on the home page...

<a href = 'index' class = 'active'>
<a href = 'contact' class = 'nonactive'>
<a href = 'about' class = 'nonactive'>

I need to find a way of telling the header.php file which function in the controller is being displayed so the header can assign 'active' to the appropriate link.

Something like the following, but obviously this wont work...

Code:

function index()
    {
                $data['tab'] = 'active';
        $this->load->view('template/header', $data);

        $this->load->view('pages/index');
        $this->load->view('template/footer');
    }

[eluser]Teks[/eluser]
I don't know if I understood you correctly:

[quote author="Solarpitch" date="1231126576"]Hi,

I have this little problem I'm trying to figure out. I have a tabular menu in my header.php file. Anytime a page is selected the style of the tab will change (ie. the tab will be highlighted for that specific page)[/quote]

What is making me confused is the sentence "anytime a page is selected(...)". What does 'selected' mean, exactly?

If it means "every time the visitor's cursor moves over the menu link and clicks on it", then what you want can be achieved with CSS and/or javacript alone, and some carefully defined selectors ("a:hover", "a:active", etc.).

It, may, however, mean instead, that you wish to highlight in the menu the *currently visited page* - ie., the page that the visitor is currently on. If that is the case, my suggestion would be as follows - and please, keep in mind that there might be many different solutions to this problem.

I imagine, that you already have a function that builds the menu. If I interpret the description of your problem correctly, it seems that the menu appears in the header of your pages, but you've placed your menu-building function in your controller. If that is the case, I would suggest as a first step, that you perhaps place the menu-building function into a HELPER, which the header view file can call directly.

Your menu-building function should then take as one of its parameters the id of the page where the menu will be displayed. As the function iterates through all your pages, building the items and links of the menu, if it comes across the *current* page, it should add your specific css class. The function then returns the fully-formatted menu to the header view, which simply displays it.

I hope this helps.

[eluser]Bogdan Tanase[/eluser]
How about something like this?

Code:

< a href="#" class='&lt;?=($this->uri->segment(3)=="contact")?"active":"nonactive"?&gt;'>Contact < /a>

Compare the current segment (link corresponding to controller function) with the navigation link and set the class properly.

[eluser]xwero[/eluser]
If you give the body an unique id and the menu tabs too you can do the selecting in the css

Code:

#home #tab_one, #some_page #tab_two, #contact #tab_three {/* selected style */}

[eluser]obiron2[/eluser]
I'm with bogdan on this one

Assuming the active menu option is directly tied to one or more URI segments, simply build the menu array in your model and as you build it or afterwards if you have an appropriate array key assign the relevant menu option to have a class of active.

Obiron

[eluser]Solarpitch[/eluser]
Yeah thanks, I agree also... I think it would be the best way to implement it. So I'd pretty much have..

Code:

< a href="#" class='&lt;?=($this->uri->segment(3)=="index")?"active":"nonactive"?&gt;'>Index< /a>

< a href="#" class='&lt;?=($this->uri->segment(3)=="about")?"active":"nonactive"?&gt;'>About< /a>

< a href="#" class='&lt;?=($this->uri->segment(3)=="contact")?"active":"nonactive"?&gt;'>Contact < /a>

Although I think it would be segment 2 in my case. So to clarify, the above is basically saying if the 3rd segment of the uri equals index, set class equal to active.. otherwise set as nonactive. Just I've never seen it done this way without the use of an if else statement... fancy

[eluser]xwero[/eluser]
If you use classes, you better use just one class to identify the selected tab than i active and all other tabs nonactive. I think there is no reason to have a nonactive class. So you can do

Code:

< a href="#" class='&lt;?php if($this->uri->segment(3)=="index") echo "active" ?&gt;'>Index< /a>

[eluser]Solarpitch[/eluser]
I see, but the nonactive class will still contain styling for the tabs that are not selected. So a link will need to be either "active" or "nonactive" otherwise my nonactive tabs class would be class="".

[eluser]xwero[/eluser]
Your nonactive class is the default styling of the tabs so you don't need to add a class with the same style?

But you are right i have to adjust my code

Code:

< a href="#"&lt;?php if($this->uri->segment(3)=="index") echo ' class="active"' ?&gt;>Index< /a>

[eluser]Solarpitch[/eluser]
[quote author="xwero" date="1231191055"]Your nonactive class is the default styling of the tabs so you don't need to add a class with the same style?

But you are right i have to adjust my code

Code:

< a href="#"&lt;?php if($this->uri->segment(3)=="index") echo ' class="active"' ?&gt;>Index< /a>

[/quote]

Ah right cool... that makes sense now. That should do the trick nicely. Thanks all for your help.