How to change the menu classes in Joomla 3 default.php file to mimic custom menu classes

Question

Ok the background on this is as follows: 1. I want the joomla menu nav to switch from its default classes to my custom classes and add an tag for the pages active menu item (if neccessary)

The default classes in the default.php file is this

<ul class="nav menu<?php echo $class_sfx;?>"<?php
$tag = '';

if ($params->get('tag_id') != null)
{
    $tag = $params->get('tag_id') . '';
    echo ' id="' . $tag . '"';
}
 ?>>
 <?php
 foreach ($list as $i => &$item)
 {
$class = 'item-' . $item->id;

if ($item->id == $active_id)
{
    $class .= ' current';
}

if (in_array($item->id, $path))
{
    $class .= ' active';
}
elseif ($item->type == 'alias')
{
    $aliasToId = $item->params->get('aliasoptions');

    if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
    {
        $class .= ' active';
    }
    elseif (in_array($aliasToId, $path))
    {
        $class .= ' alias-parent-active';
    }
}

if ($item->type == 'separator')
{
    $class .= ' divider';
}

if ($item->deeper)
{
    $class .= ' deeper';
}

if ($item->parent)
{
    $class .= ' parent';
}

if (!empty($class))
{
    $class = ' class="' . trim($class) . '"';
}

echo '<li' . $class . '>';

// Render the menu item.
switch ($item->type) :
    case 'separator':
    case 'url':
    case 'component':
    case 'heading':
        require JModuleHelper::getLayoutPath('mod_menu', 'default_' .                                                 $item->type);
        break;

    default:
        require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
        break;
endswitch;

// The next item is deeper.
if ($item->deeper)
{
    echo '<ul class="nav-child unstyled small">';
}
elseif ($item->shallower)
{
    // The next item is shallower.
    echo '</li>';
    echo str_repeat('</ul></li>', $item->level_diff);
}
else
{
    // The next item is on the same level.
    echo '</li>';
}
 }
 ?></ul>

the output via browser is this

<ul class="nav menu">
<li class="item-101 current active"><a href="/">Home</a></li></ul>

the output I would like it to be is this...

 <ul class="title-area">
    <li class="name">
    <h1><a href="#">My Site</a></h1>
  </li>
 </ul>

My brute intution would tell me to change the nav to title-area but I am unsure of how to incorporate "name" into the li structure.

Moreover, I am assuming the tag is only for the page that is active or present at the moment... This would be nice to incorporate as well... as my foundation css structure has the line height already assigned to that structure of html.

help is appreciated.

Answer 1

Ok after testing I have figured out the proper answer. Now this solution is in general and should work well for any menu and dropdown menu structure within Joomla's default menu system.

I have complete this solution with Foundation 5 menu setup (later I will try a different menu system but the idea should be the same).

For the menu module go to the default.php located here: /modules/mod_menu/tmpl

The default setting has a class structure of nav menu as such:

<ul class="nav menu<?php echo $class_sfx;?>"<?php
$tag = '';

Change the class to be what you need the class structure to be. if you are 100% circumventing the Joomla css (bootstrap) file structure then you can change it... or if not you can just add a class name(s) that you need.

here is what mine changed to:

<ul class="right nav menu<?php echo $class_sfx;?>"<?php
$tag = '';

Now if you are following your new menu system's class structure (Foundation) you might need to designate a class for <li and for the sub menu items i.e. for a dropdown menu.

***Keep in mind that for Joomla's menu structure within PHP it pulls the item number and if it is the current page it will auto mark it as auto (automatically)... so no need to add that in except for the class you are adding. Edit* Adding the class "has-dropdown" should be for the parent

so on this line (the before):

if ($item->parent)
{
    $class .= ' parent';
}

Change it to this (the after):

if ($item->parent)
{
    $class .= ' has-dropdown parent';
}

As well the sub child items need to change.

So on this line (the before):

// The next item is deeper.
if ($item->deeper)
{
 echo '<ul class="nav-child unstyled small">';
}

Change it to this (the after):

// The next item is deeper.
if ($item->deeper)
{
    echo '<ul class="dropdown nav-child unstyled small">';
}

I think it would be great to add a plug-in that can mod the backend menu setup to include class to add to or change for <ul and <li for both menu and sub menu child items.

Hopefully this helps someone... I will add more later.

*I have one error I am getting with this and the Foundation menu I am using. The first child will show but if that child has a child menu item it won't show... So there's that fix still needed.

*remember to change the setting: Show Sub-menu Items to "yes"