Need help on sidebar menu

[shaibustephen]

I am overriding the default sidebar menu of protostar templateto give me custom sidebar menu. I have actually done the needful but my final output in the joomla template is not showing just like the html sample sidebar menu. I have the screenshot of both and attachment of my template and the html sidebar sample. The html sidebar sample is collapse down sidebar menu. Help me check through on what i have done in my template and let me know where i got the whole things wrong? I really appreciate.

Screenshot html sample.png

screenshot protostar.png

protostar.zip

mm-vertical.zip

[Webdongle]

What is your definition of override?

[shaibustephen]

You just have to check the attachment to know the definition of my override.

[Webdongle]

Nope that does not explain it clearly.

[shaibustephen]

I have done the needful but my problem now is that the sidebar menu is not executing drop-down menu. What are the line of css to bring out drop-down menu on Joomla. For your information, the html sample css is able to execute drop-down effect but could not do so in Joomla

[toivo]

Your attachment is an HTML demo page downloaded from https://onokumus.com/metismenujs/mm-vertical.html.

The Joomla Extensions Directory (JED) has a number of menu extensions, already integrated with Joomla. Why do you not use one of them?

[shaibustephen]

Yes and I equally have the sample template corrected. Do not worry yourself on the former question. I have resolved it at my end. The problem now is that while I integrated it, it is not executing drop-down to give room for collapse as it is in the demo. What line of css code should add to the demo css to get this effected in my Joomla site

[Webdongle]

Define the css class in the module's edit page?

[shaibustephen]

Here below is the css and js for the sidebar menu. It is collapsable menu. It doesnt collapse below in the joomla, it does not show dropdown even while the dropdown functions in the html as below. let me know what to add to the below css and the js to bring out dropdown and to make it collpase
.sidebar-nav {
background: #212529;
}
.sidebar-nav ul {
padding: 0;
margin: 0;
list-style: none;
background: #343a40;
}

.sidebar-nav .metismenu {
background: #212529;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

.sidebar-nav .metismenu li + li {
margin-top: 5px;
}

.sidebar-nav .metismenu li:first-child {
margin-top: 5px;
}
.sidebar-nav .metismenu li:last-child {
margin-bottom: 5px;
}


.sidebar-nav .metismenu > li {
/*-webkit-box-flex: 1;
-ms-flex: 1 1 0%;
flex: 1 1 0%;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
.sidebar-nav .metismenu a {
position: relative;
display: block;
padding: 13px 15px;
color: #adb5bd;
outline-width: 0;
transition: all .3s ease-out;
}

.sidebar-nav .metismenu ul a {
padding: 10px 15px 10px 30px;
}

.sidebar-nav .metismenu ul ul a {
padding: 10px 15px 10px 45px;
}

.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus,
.sidebar-nav .metismenu a:active {
color: #f8f9fa;
text-decoration: none;
background: #0b7285;
}
/*!
* metismenujs - v1.1.0
* A menu plugin
* https://github.com/onokumus/metismenujs#readme
*
* Made by Osman Nuri Okumus <[email protected]> (https://github.com/onokumus)
* Under MIT License
*/
.metismenu .arrow {
float: right;
line-height: 1.42857; }

*[dir="rtl"] .metismenu .arrow {
float: left; }

/*
* Require Bootstrap 3.x
* https://github.com/twbs/bootstrap
*/
.metismenu .glyphicon.arrow:before {
content: "\e079"; }

.metismenu .mm-active > a > .glyphicon.arrow:before {
content: "\e114"; }

/*
* Require Font-Awesome
* http://fortawesome.github.io/Font-Awesome/
*/
.metismenu .fa.arrow:before {
content: "\f104"; }

.metismenu .mm-active > a > .fa.arrow:before {
content: "\f107"; }

/*
* Require Ionicons
* http://ionicons.com/
*/
.metismenu .ion.arrow:before {
content: "\f3d2"; }

.metismenu .mm-active > a > .ion.arrow:before {
content: "\f3d0"; }

.metismenu .plus-times {
float: right; }

*[dir="rtl"] .metismenu .plus-times {
float: left; }

.metismenu .fa.plus-times:before {
content: "\f067"; }

.metismenu .mm-active > a > .fa.plus-times {
transform: rotate(45deg); }

.metismenu .plus-minus {
float: right; }

*[dir="rtl"] .metismenu .plus-minus {
float: left; }

.metismenu .fa.plus-minus:before {
content: "\f067"; }

.metismenu .mm-active > a > .fa.plus-minus:before {
content: "\f068"; }

.metismenu .mm-collapse:not(.mm-show) {
display: none; }

.metismenu .mm-collapsing {
position: relative;
height: 0;
overflow: hidden;
transition-timing-function: ease;
transition-duration: 0.35s;
transition-property: height, visibility; }

.metismenu .has-arrow {
position: relative; }

.metismenu .has-arrow::after {
position: absolute;
content: "";
width: 0.5em;
height: 0.5em;
border-width: 1px 0 0 1px;
border-style: solid;
border-color: currentColor;
border-color: initial;
right: 1em;
transform: rotate(-45deg) translate(0, -50%);
transform-origin: top;
top: 50%;
transition: all 0.3s ease-out; }

*[dir="rtl"] .metismenu .has-arrow::after {
right: auto;
left: 1em;
transform: rotate(135deg) translate(0, -50%); }

.metismenu .mm-active > .has-arrow::after,
.metismenu .has-arrow[aria-expanded="true"]::after {
transform: rotate(-135deg) translate(0, -50%); }

*[dir="rtl"] .metismenu .mm-active > .has-arrow::after,
*[dir="rtl"] .metismenu .has-arrow[aria-expanded="true"]::after {
transform: rotate(225deg) translate(0, -50%); }

/*# sourceMappingURL=metismenujs.css.map */

for the js below
/*!
* metismenujs - v1.1.0
* MetisMenu with Vanilla-JS
* https://github.com/onokumus/metismenujs#readme
*
* Made by Osman Nuri Okumus <[email protected]> (https://github.com/onokumus)
* Under MIT License
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.MetisMenu = factory());
}(this, function () { 'use strict';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */

var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments;
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};

var Default = {
parentTrigger: "li",
subMenu: "ul",
toggle: true,
triggerElement: "a"
};
var ClassName = {
ACTIVE: "mm-active",
COLLAPSE: "mm-collapse",
COLLAPSED: "mm-collapsed",
COLLAPSING: "mm-collapsing",
METIS: "metismenu",
SHOW: "mm-show"
};

var MetisMenu = /** @class */ (function () {
/**
* Creates an instance of MetisMenu.
*
* @constructor
* @param {HTMLElement | string} element
* @param {IMMOptions} [options]
* @memberof MetisMenu
*/
function MetisMenu(element, options) {
this.element =
typeof element === "string" ? document.querySelector(element) : element;
this.cacheEl = this.element;
this.config = __assign(__assign({}, Default), options);
this.cacheConfig = this.config;
this.disposed = false;
this.ulArr = [];
this.listenerOb = [];
this.init();
}
MetisMenu.prototype.update = function () {
this.disposed = false;
this.element = this.cacheEl;
this.config = this.cacheConfig;
this.init();
};
MetisMenu.prototype.dispose = function () {
for (var _i = 0, _a = this.listenerOb; _i < _a.length; _i++) {
var lo = _a[_i];
for (var key in lo) {
if (lo.hasOwnProperty(key)) {
var el = lo[key];
el[1].removeEventListener(el[0], el[2]);
}
}
}
this.ulArr = [];
this.listenerOb = [];
this.config = null;
this.element = null;
this.disposed = true;
};
MetisMenu.prototype.on = function (event, fn) {
this.element.addEventListener(event, fn, false);
return this;
};
MetisMenu.prototype.off = function (event, fn) {
this.element.removeEventListener(event, fn);
return this;
};
MetisMenu.prototype.emit = function (event, eventDetail, shouldBubble) {
if (shouldBubble === void 0) { shouldBubble = false; }
var evt;
if (typeof CustomEvent === "function") {
evt = new CustomEvent(event, {
bubbles: shouldBubble,
detail: eventDetail
});
}
else {
evt = document.createEvent("CustomEvent");
evt.initCustomEvent(event, shouldBubble, false, eventDetail);
}
this.element.dispatchEvent(evt);
return this;
};
MetisMenu.prototype.init = function () {
this.element.classList.add(ClassName.METIS);
this.ulArr = [].slice.call(this.element.querySelectorAll(this.config.subMenu));
for (var _i = 0, _a = this.ulArr; _i < _a.length; _i++) {
var ul = _a[_i];
var li = ul.parentNode;
ul.classList.add(ClassName.COLLAPSE);
if (li.classList.contains(ClassName.ACTIVE)) {
this.show(ul);
}
else {
this.hide(ul);
}
var a = li.querySelector(this.config.triggerElement);
if (a.getAttribute("aria-disabled") === "true") {
return;
}
a.setAttribute("aria-expanded", "false");
var listenerOb = {
aClick: ["click", a, this.clickEvent.bind(this)]
};
for (var key in listenerOb) {
if (listenerOb.hasOwnProperty(key)) {
var listener = listenerOb[key];
listener[1].addEventListener(listener[0], listener[2]);
}
}
this.listenerOb.push(listenerOb);
}
};
MetisMenu.prototype.clickEvent = function (ev) {
if (!this.disposed) {
if (ev.currentTarget.tagName === "A") {
ev.preventDefault();
}
var li = ev.currentTarget.parentNode;
var ul = li.querySelector(this.config.subMenu);
this.toggle(ul);
}
};
MetisMenu.prototype.toggle = function (ul) {
if (ul.parentNode.classList.contains(ClassName.ACTIVE)) {
this.hide(ul);
}
else {
this.show(ul);
}
};
MetisMenu.prototype.show = function (ul) {
var _this = this;
if (this.isTransitioning || ul.classList.contains(ClassName.COLLAPSING)) {
return;
}
var complete = function () {
ul.classList.remove(ClassName.COLLAPSING);
ul.style.height = "";
ul.removeEventListener("transitionend", complete);
_this.setTransitioning(false);
_this.emit("shown.metisMenu", {
shownElement: ul
});
};
var li = ul.parentNode;
li.classList.add(ClassName.ACTIVE);
var a = li.querySelector(this.config.triggerElement);
a.setAttribute("aria-expanded", "true");
a.classList.remove(ClassName.COLLAPSED);
ul.style.height = "0px";
ul.classList.remove(ClassName.COLLAPSE);
ul.classList.remove(ClassName.SHOW);
ul.classList.add(ClassName.COLLAPSING);
var eleParentSiblins = [].slice
.call(li.parentNode.children)
.filter(function (c) { return c !== li; });
if (this.config.toggle && eleParentSiblins.length > 0) {
for (var _i = 0, eleParentSiblins_1 = eleParentSiblins; _i < eleParentSiblins_1.length; _i++) {
var sibli = eleParentSiblins_1[_i];
var sibUl = sibli.querySelector(this.config.subMenu);
if (sibUl !== null) {
this.hide(sibUl);
}
}
}
this.setTransitioning(true);
ul.classList.add(ClassName.COLLAPSE);
ul.classList.add(ClassName.SHOW);
ul.style.height = ul.scrollHeight + "px";
this.emit("show.metisMenu", {
showElement: ul
});
ul.addEventListener("transitionend", complete);
};
MetisMenu.prototype.hide = function (ul) {
var _this = this;
if (this.isTransitioning || !ul.classList.contains(ClassName.SHOW)) {
return;
}
this.emit("hide.metisMenu", {
hideElement: ul
});
var li = ul.parentNode;
li.classList.remove(ClassName.ACTIVE);
var complete = function () {
ul.classList.remove(ClassName.COLLAPSING);
ul.classList.add(ClassName.COLLAPSE);
ul.style.height = "";
ul.removeEventListener("transitionend", complete);
_this.setTransitioning(false);
_this.emit("hidden.metisMenu", {
hiddenElement: ul
});
};
ul.style.height = ul.getBoundingClientRect().height + "px";
ul.style.height = ul.offsetHeight + "px";
ul.classList.add(ClassName.COLLAPSING);
ul.classList.remove(ClassName.COLLAPSE);
ul.classList.remove(ClassName.SHOW);
this.setTransitioning(true);
ul.addEventListener("transitionend", complete);
ul.style.height = "0px";
var a = li.querySelector(this.config.triggerElement);
a.setAttribute("aria-expanded", "false");
a.classList.add(ClassName.COLLAPSED);
};
MetisMenu.prototype.setTransitioning = function (isTransitioning) {
this.isTransitioning = isTransitioning;
};
return MetisMenu;
}());

return MetisMenu;

}));
//# sourceMappingURL=metismenujs.js.map

[Webdongle]

Are you using a custom module or are you adding the css and hoping the Joomla menu module will use the css? Please describe the steps that you are using.

[shaibustephen]

The Joomla side menu module is actually using the css

[Webdongle]

I would suggest that you think it is but in actuality it is not. If you are trying to get the Joomla module to use the css then you need to use the class suffix in the module's edit screen https://docs.joomla.org/Module_Class_Suffix . But if you are using an override (like your first post says) then please see https://docs.joomla.org/How_to_override ... omla!_core and add the classes to the override.

It is difficult to know if you are creating an override or trying to add css for the module because you claim both in two separate posts. If you answer the question I asked to define your definition of override then we can help you more.

[shaibustephen]

Ok
Take a look at the little override I did. I went to default.php of the mod_menu and metismenu in line 21. I came again add menu1 in the menu tag ID of module menu.
What best way can I get this done. Help me out. I prefer the override.

[Webdongle]

Use the Template manager to create the override of Joomla's menu module
Create your css
Add the Classes/ID's to the override of Joomla's menu module's default.php

[shaibustephen]

My css is inside parent css called style already. How should I add it to module

[Webdongle]

https://www.w3schools.com/howto/howto_js_add_class.asp
or perhaps use the html of he menu that you are trying to copy
or use a menu extension https://extensions.joomla.org/category/ ... u-systems/

[shaibustephen]

I have not resolved the current topic. The issue right now is that the sidebar menu is not collapsing> View the screenshot on what i have done.
find the attached template copy in the post above

When i view my joomla template sidebar on the browser it gives code as below
<ul class="nav menu metismenu mod-list" id=" menu1">
<li class="item-101 default"><a href="/leverage/index.php">Home</a></li><li class="item-102 current active"><a href="/leverage/index.php/about-us">About us</a></li><li class="item-103 deeper parent"><a href="/leverage/index.php/services">Services</a><ul class="nav-child unstyled small"><li class="item-106"><a href="/leverage/index.php/services/strategic-consulting">Strategic Consulting</a></li><li class="item-104"><a href="/leverage/index.php/services/assessments-feedback">Assessments &amp; Feedback</a></li><li class="item-105"><a href="/leverage/index.php/services/development-coaching">Development &amp; Coaching</a></li><li class="item-109"><a href="/leverage/index.php/services/test">test</a></li></ul></li><li class="item-107"><a href="/leverage/index.php/contact-us">Contact Us</a></li><li class="item-108"><span class="nav-header fa fa-phone">+2349075716236</span>
</li></ul>

and on the sample html
<nav class="sidebar-nav">
<ul class="metismenu" id="menu1">
<li class="">
<a class="has-arrow mm-collapsed" href="#" aria-expanded="false">
<span class="fa fa-fw fa-github fa-lg"></span>
metisMenu
</a>
<ul class="mm-collapse" style="">
<li>
<a href="https://github.com/onokumus/metismenujs">
<span class="fa fa-fw fa-code-fork"></span> Fork
</a>
</li>
<li>
<a href="https://github.com/onokumus/metismenujs">
<span class="fa fa-fw fa-star"></span> Star
</a>
</li>
<li>
<a href="https://github.com/onokumus/metismenujs/issues">
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
</a>
</li>
</ul>
</li>
<li class="">
<a class="has-arrow mm-collapsed" href="#" aria-expanded="false">Menu 0</a>
<ul class="mm-collapse" style="">
<li>
<a href="#">item 0.1</a>
</li>
<li>
<a href="#">item 0.2</a>
</li>
<li>
<a href="http://onokumus.com">onokumus</a>
</li>
<li>
<a href="#">item 0.4</a>
</li>
</ul>
</li>
<li id="removable" class="">
<a class="has-arrow mm-collapsed" href="#" aria-expanded="false">Menu 1</a>
<ul class="mm-collapse" style="">
<li>
<a href="#">item 1.1</a>
</li>
<li>
<a href="#">item 1.2</a>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
<ul class="mm-collapse">
<li>
<a href="#">item 1.3.1</a>
</li>
<li>
<a href="#">item 1.3.2</a>
</li>
<li>
<a href="#">item 1.3.3</a>
</li>
<li>
<a href="#">item 1.3.4</a>
</li>
</ul>
</li>
<li>
<a href="#">item 1.4</a>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
<ul class="mm-collapse">
<li>
<a href="#">item 1.5.1</a>
</li>
<li>
<a href="#">item 1.5.2</a>
</li>
<li>
<a href="#">item 1.5.3</a>
</li>
<li>
<a href="#">item 1.5.4</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
<ul class="mm-collapse">
<li>
<a href="#">item 2.1</a>
</li>
<li>
<a href="#">item 2.2</a>
</li>
<li>
<a href="#">item 2.3</a>
</li>
<li>
<a href="#">item 2.4</a>
</li>
</ul>
</li>
</ul> </nav>

My remark:
The 'mm-collapse(ul class="mm-collapse"></ul>' in the sample code which help to make the sidebar collpase is missing in the upper joomla sidebar menu instead, i had some like this <ul class="nav-child unstyled small"></ul> in my joomla sidebar menu. I dont know how i can make it to have mm-collapse.

I made another attempt to do mod_menu override as below, i still not get it right.
In the two option, how do i get it resolve
<?php
/**
* @package Joomla.Site
* @subpackage mod_menu
*
* @copyright Copyright (C) 2005 - 2019 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
?>
<nav class="sidebar-nav">
<ul class="metismenu" id="menu1">
<?php 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';
}

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)
{
echo '<ul class="nav-child unstyled small" "mm-collaps">';
}
// The next item is shallower.
elseif ($item->shallower)
{
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
// The next item is on the same level.
else
{
echo '</li>';
}
}
?>
</ul>
</nav>
<nav class="navbar navbar-expand-lg">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MPrincipal" aria-controls="MPrincipal" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="MPrincipal">
<ul class="nav menu<?php echo $class_sfx; ?> mod-list"<?php echo $id; ?>>
<?php foreach ($list as $i => &$item)
{
$class = 'nav-item 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 dropdown';
}

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)
{
echo '<ul class="nav-child unstyled small dropdown-menu" aria-labelledby="navbarDropdown">';
}
// The next item is shallower.
elseif ($item->shallower)
{
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
// The next item is on the same level.
else
{
echo '</li>';
}
}
?></ul>
</div>
</nav>