Need help on sidebar menu

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Need help on sidebar menu

Post by shaibustephen » Sun Nov 03, 2019 3:06 am

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
You do not have the required permissions to view the files attached to this post.

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37565
Joined: Sat Apr 05, 2008 9:58 pm

Re: Need help on sidebar menu

Post by Webdongle » Sun Nov 03, 2019 10:31 am

What is your definition of override?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on sidebar menu

Post by shaibustephen » Mon Nov 04, 2019 3:09 am

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

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37565
Joined: Sat Apr 05, 2008 9:58 pm

Re: Need help on sidebar menu

Post by Webdongle » Mon Nov 04, 2019 9:29 am

Nope that does not explain it clearly.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on sidebar menu

Post by shaibustephen » Tue Nov 05, 2019 12:04 am

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

User avatar
toivo
Joomla! Master
Joomla! Master
Posts: 11538
Joined: Thu Feb 15, 2007 5:48 am
Location: Suzhou, China

Re: Need help on sidebar menu

Post by toivo » Tue Nov 05, 2019 2:49 am

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?
Toivo Talikka, Global Moderator

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on sidebar menu

Post by shaibustephen » Tue Nov 05, 2019 10:46 am

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

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37565
Joined: Sat Apr 05, 2008 9:58 pm

Re: Need help on sidebar menu

Post by Webdongle » Tue Nov 05, 2019 11:20 am

Define the css class in the module's edit page?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on sidebar menu

Post by shaibustephen » Fri Nov 08, 2019 3:44 am

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 <onokumus@gmail.com> (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 <onokumus@gmail.com> (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

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37565
Joined: Sat Apr 05, 2008 9:58 pm

Re: Need help on sidebar menu

Post by Webdongle » Fri Nov 08, 2019 8:36 am

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.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on sidebar menu

Post by shaibustephen » Fri Nov 08, 2019 11:17 am

The Joomla side menu module is actually using the css

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37565
Joined: Sat Apr 05, 2008 9:58 pm

Re: Need help on sidebar menu

Post by Webdongle » Fri Nov 08, 2019 1:05 pm

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.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on sidebar menu

Post by shaibustephen » Sat Nov 09, 2019 6:42 pm

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.

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37565
Joined: Sat Apr 05, 2008 9:58 pm

Re: Need help on sidebar menu

Post by Webdongle » Sat Nov 09, 2019 9:07 pm

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
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on sidebar menu

Post by shaibustephen » Sun Nov 10, 2019 8:00 pm

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

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37565
Joined: Sat Apr 05, 2008 9:58 pm

Re: Need help on sidebar menu

Post by Webdongle » Sun Nov 10, 2019 8:16 pm

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/
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Sat Nov 17, 2018 1:52 pm

Re: Need help on sidebar menu

Post by shaibustephen » Mon Nov 11, 2019 2:06 am

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>
You do not have the required permissions to view the files attached to this post.


Post Reply

Return to “Templates for Joomla! 3.x”