CODEWITHSUNDEEP
phpcodeigniter
BlareStriker
BlareStriker

Reputation: 235

HighLighted item menu when clicked in codeIgniter

how can i make the active menu in codeIgniter, its not when hover, but when clicked, for example if we are in some category, that item in the menu is highlighted, how can be this done in CI?

Upvotes: 0

Views: 1776

Answers (2)

ali997
ali997

Reputation: 26

Depends on your routing and menu generation script. Esiest method is to check for segments in uri. For example for static menu You can do this:

<?php $class = $this->uri->segment(1)=="someController"?"highlighted":""; ?>
<a href="/index.php/someController/" class="<?php echo $class; ?>">Menu item</a>

Upvotes: 1

Squig
Squig

Reputation: 872

There are a few steps involved here.

Firstly, you need to determine which is the 'current' menu item or category. If you can structure your site so that there's a direct relationship between your URL structure and your top level menu items (and / or your categories) then this will help a lot.

You'll need a common section of code that generates your main menu. This code could iterate through an array of menu item titles to produce the HTML for the menu. If the array had keys for the URL segment and values for the menu item text...

$menuItems = Array(
    "/home" => "Home",
    "/products" => "Products",
    "/faq" => "FAQ",
    "/aboutus" => "About Us"
);

(Leading slashes included for clarity as to which are the URI segments and which are the Menu Titles only - you would usually omit the leading slash)

... then, while you're iterating through, you could check each item against the relevant segment of the current URL.

Secondly, having worked out which is the current item, you could add a css class to the relevant HTML element.

e.g.

$menuHtml = "<ul class='menu'>\r\n";
foreach($menuItems as $segment => $title) {
    if($segment == $this->uri->segment(1)) {
        $menuHTML .= "<li class='current'>$title</li>";
    } else {
        $menuHTML .= "<li>$title</li>\r\n";
    }
}
$menuHtml .= "</ul>";

You'd then need to apply the required highlight styles in CSS to the li.current element:

li.current {
    <your-highlight-css-styles-here>
}

Upvotes: 0

Related Questions