0

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.

  • 2
    You have to override the menu module via template override or via a sub template for the module: templates/your_template/html/mod_menu/default.php – Dennis Heiden Feb 19 '18 at 20:53
  • Thanks that seems to fix my problem at least half ... now I need to ask how to apply css to the submenu <li> tags (second level menu)? – Joey Feb 20 '18 at 7:34
  • For clarification: my menu now looks sth like this: <nav ....> <ul class="nav-main"><li class="dropdown"><ul class="dropdown-menu"><li ...> .... so how do I apply a different css to the second <li> than the first – Joey Feb 20 '18 at 7:35
  • Pls add your code to the question. – Dennis Heiden Feb 20 '18 at 8:26
  • well, I figured out a workaround by using a trigger plugin which directly replaces html code so I can now assign the correct classes to the specific <li> items. – Joey Feb 20 '18 at 9:02
0

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.

0

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);
  • This is unnecessary, see my answer. – Dennis Heiden Mar 2 '18 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.