Joomla menu css

Question

I wanted to create a menu in the top of the page, because of the specific layout in the css i thought this is a solution to do this using the following code in my template (the index.php)

    $item_active = $menu->getActive();
    for($i = 0; $i >  count($menu_items); $i++){
        $item = $menu_items[$i];            
        if($item_active->id == $item->id)
            echo '<a href="'.$this->baseurl.'/'.$item->route.'"><div id="button_pressed"><div id="button_text">'.$item->title.'</div></div></a>';
        else
            echo '<a href="'.$this->baseurl.'/'.$item->route.'"><div id="button"><div id="button_text">'.$item->title.'</div></div></a>';

    }

But isnt there a better way, i think im missing a link here

Answer 1

This shouldn't be in your template. The menu should be in a module. Most menu modules have active highlighting built in. Even the core Joomla mod_menu supports active highlighting.

Answer 2

What you have to do is override for css such that a:link, a:hover, a:visited are using white colour but you need grey colour instead for active page. You just make anything the same and put !important behind that in #active_menu as example :

#main a:link, #main a:hover, #main a:visited {colour:#FFF;}

#active_menu {#CCC !important;}

Answer 3

I think a good way, and it's the way I always use, is with a ternary operator inside the class of the links.

-- inside de <a> tag bt without the spaces in the < a> -- 

< a class="button <?= $item_active->id == $item->id ? : 'button_pressed' : '' ?>" >Hello< /a>

Then you add the CSS rules to .button_pressed

It's a very clean way to do it. Just ask if you want further help :D