Desktop & Mobile menu using (jdoc attribs, module template and layout override) Joomla

Details: Written by: abdul waheed; Category: Joomla

Before diving into the tutorial, let’s take a moment to understand the key components we’ll be working with:

JDoc Attribs: These are attributes that allow you to add additional properties to your Joomla module and component outputs. They give you more control over the HTML structure and styling.
Module Templates: Joomla allows you to create custom templates for different modules. These templates determine the HTML structure and CSS for modules like menus, making them essential when customizing menu designs.
Layout Overrides: Joomla’s layout overrides provide a way to change the default HTML output of a module or component without affecting core files. This is crucial for maintaining the upgradability of your Joomla site.

Then consider following steps to make desktop & mobile menu.

Step 1:

Create two menu type module from administrator like that and assign them two different positions as you can see in below image bc-3a & bc-3b are two positions in template.

Step 2:

Inside your template main index.php file. Consider following code: First we have countmodule method, which will show both module at once. Next we have two css classes which will hide module on desktop & mobile respectively.

Next first we will show bc-3a position and pass id mobileTopMenu(an id to be used for JavaScript function to work correctly and avoid confliction). Then we will show module positioned at bc-3b and pass id "deskTopMenu".

Step 3:

Create style layout override for that module

Here is code for card.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia
 *
 * @copyright   (C) 2020 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\Utilities\ArrayHelper;

$module  = $displayData['module'];
$params  = $displayData['params'];
$attribs = $displayData['attribs'];

if ($module->content === null || $module->content === '') {
    return;
}

$moduleTag              = $params->get('module_tag', 'div');
$moduleAttribs          = [];
$moduleAttribs['class'] = $module->position . ' card ' . htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_QUOTES, 'UTF-8');
$headerTag              = htmlspecialchars($params->get('header_tag', 'h3'), ENT_QUOTES, 'UTF-8');
$headerClass            = htmlspecialchars($params->get('header_class', ''), ENT_QUOTES, 'UTF-8');
$headerAttribs          = [];
$headerAttribs['class'] = $headerClass;

// Only output a header class if it is not card-title
if ($headerClass !== 'card-title') :
    $headerAttribs['class'] = 'card-header ' . $headerClass;
endif;

// Add class from attributes if any
if (!empty($attribs['class'])) {
    $moduleAttribs['class'] .= ' ' . htmlspecialchars($attribs['class'], ENT_QUOTES, 'UTF-8');
}

// Only add aria if the moduleTag is not a div
if ($moduleTag !== 'div') {
    if ($module->showtitle) :
        $moduleAttribs['aria-labelledby'] = 'mod-' . $module->id;
        $headerAttribs['id']              = 'mod-' . $module->id;
    else :
        $moduleAttribs['aria-label'] = $module->title;
    endif;
}
?>
<script>
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function mobileTopMenu_<?=$attribs['id']?>(id) {

  var x = document.getElementById(id);
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
	x.style.position="absolute";
    x.style.background="#FFFFFF";
    x.style.right="10px";
    x.style.width="250px";
    x.style.border="1px solid #EEE";
    x.style.borderRadius="15px";
	x.style.zIndex="9998";
  }
}
</script> 
<div class="topnav_<?=$attribs['id']?> <?php //echo $class_sfx; ?>">
  <a href="#home" class="active"></a>
  <!-- Navigation links (hidden by default) -->
  <div id="<?=$attribs['id']?>">
  <?php echo $module->content; ?>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="mobileTopMenu_<?=$attribs['id']?>('<?=$attribs['id']?>')">
    <i class="fa fa-bars"></i>
  </a>
</div>
                 
<style>
/*********
MENU
*****************/
/* Style the navigation menu */
.topnav_<?=$attribs['id']?> {
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav_<?=$attribs['id']?> #<?=$attribs['id']?> {
  display: none;
}

/* Style navigation menu links */
.topnav_<?=$attribs['id']?> a {
	color: green;
	padding: 10px 12px;
	text-decoration: none;
	font-size: 17px;
	display: block;
	margin: 7px;
}

/* Style the hamburger menu */
.topnav_<?=$attribs['id']?> a.icon {
	background: #FFFFFF;
	border:1px solid green;
	border-radius:50%;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 9999;
}

/* Add a grey background color on mouse-over */
.topnav_<?=$attribs['id']?> a:hover {
  background-color: #FFF;
  color: black;
}
.metismenu.mod-menu .metismenu-item{
	padding: 1em 1em 1em .25em  !important;	
}
/* MOBILE */
@media (max-width:569px) {
.metismenu.mod-menu .metismenu-item {
    padding: 5px 0 !important;
    display: block;
    font-size: 1rem;
}
.topnav_<?=$attribs['id']?>
{
	display:block;
}
.headerwrapper div.container {
	border-radius: 25px;
}
.container-header nav
{
	display:contents;
}
}
</style>

Also check this : Desktop & Mobile menu in HTML CSS on www.abdulwaheed.pk

Hope this helped.

Still need help! no problem, feel free to contact us Today

Abdul Waheed : (Hire Joomla & PHP Pakistani Freelancer)

Name
Email