How do I override mod_menu and add classes to child li-elements?

Question

For a website, I use the stylesheet theme.css in my default template where the menu style is defined in classes like .dropdown-menu and so on.

My question is now: How do I apply those classes to my menu, because my menu is still using the standard classes like .deeper and .parent.

Also if I use inspect element in the browser, it applies these standard classes, but they do not even seem to exist as there is no actual css applied with them.

Answer 1

After I saw the answer of Joey, I could understand what he wanted to achieve. This is very easy to get:

1) create a template override for menu module: yourtemplate/html/mod_menu/default.php

2) copy the content of modules/mod_menu/tmpl/default.php to your override (or copy the file)

3) modify your override like this:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$id = '';

if ($tagId = $params->get('tag_id', ''))
{
    $id = ' id="' . $tagId . '"';
}

// The menu class is deprecated. Use nav instead
?>
<ul class="nav menu<?php echo $class_sfx; ?>"<?php echo $id; ?>>
<?php 
$child = false; // ADD THIS
foreach ($list as $i => &$item)
{
    $class = 'item-' . $item->id;

    if ($item->id == $default_id)
    {
        $class .= ' default';
    }

    if ($item->id == $active_id || ($item->type === 'alias' && $item->params->get('aliasoptions') == $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($child){ // ADD THIS
        $class .= ' child-class';
    }

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

    switch ($item->type) :
        case 'separator':
        case 'component':
        case 'heading':
        case 'url':
            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)
    {
        $child = true; // ADD THIS
        echo '<ul class="nav-child unstyled small">';
    }
    // The next item is shallower.
    elseif ($item->shallower)
    {
        echo '</li>';
        echo str_repeat('</ul></li>', $item->level_diff);
        $child = false; // ADD THIS
    }
    // The next item is on the same level.
    else
    {
        echo '</li>';
    }
}
?></ul>

Now we are checking if we are in child scope by setting the $child var to true. If $child is true, we add our child-class to the $class string. If we leave the $child scope, we change $child back to false.

Answer 2

So based on the comments I found out that I have to override the menu module by creating a default.php in my templates' html/mod_menu folder.

As to how to override the submenu css I used a plugin called Trigger in which you basically can swap out html-code and I just swapped the classes of my submenu with the classes I needed, which looks something like this:

$narcissus1 = ''; $narcissus1 = '<li class="item-108 dropdown">'; $echo1 = ''; $echo1 = '<li class="item-108 dropdown-submenu">';
$buffer1  = str_replace ($narcissus1, $echo1, $buffer1);
JResponse::setBody($buffer1);