2

I have a dropdown menu as main navigation of my website and I want to create an offcanvas menu that displaying the same menu items as the dropdown menu items, for responsive design purpose.

Since dropdown menu items have different css classes then I created a template overriding for mod_menu called 'offcanvas'.

My question is, is it possible to force the 'offcanvas' override to the module so when the module call in the offcanvas possition it will use my 'offcanvas' override.

I'm looking for something like this 

<jdoc:include type="modules" name="menuposition" layout="offcanvas"/>

Thanks

|improve this question
2

More info about layout override : https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

If you want to change how the mod_menu Module is displayed, then you should copy :

PATH_TO_JOOMLA/modules/mod_menu/tmpl/default.php
to
TEMPLATE_NAME/html/mod_menu/default.php

and modify the file in your template

You can also use the Template Manage to create overrides https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager/en#Creating_Overrides

You don't have to modifiy the style in your jdoc:include

<jdoc:include type="modules" name="menuposition" style="xhtml" />

More info about a style https://docs.joomla.org/Customising_the_way_modules_are_displayed

To define a custom output like "offcanvas", you have to modify this file in your template PATH_TO_JOOMLA/templates/TEMPLATE_NAME/html/modules.php.

Here an example of custom output. Important, the function name should be modChrome_offcanvas

function modChrome_offcanvas($module, &$params, &$attribs)
{
    if ($module->content)
    {
        echo "<div class=\"module mod" . $module->id . " " . htmlspecialchars($params->get('moduleclass_sfx')) . "\">";
        if ($module->showtitle)
        {
            echo "<h3 class=\"module-header\">" . $module->title . "</h3>";
        }
        echo $module->content;    
        echo "</div>";
    }
}

It define which is inserted before, after, or around the output of a module.

|improve this answer
  • Hi, thanks for your answer, but I think you misunderstood my question. I know how to work with modChrome but what I want to achieve is to render specific module in the template and force specific override layout for that. – webchun Jun 26 '15 at 8:00
1

This is untested but I think something like this would do it:

<?php
// Find modules by position name
$offcanvasModules  = JModuleHelper::getModules('menuposition');

// Pass module render options
$moduleOptions = array('layout' => 'offcanvas');
?>

<?php foreach ($offcanvasModules as $module) :
    echo JModuleHelper::renderModule($module, $moduleOptions);
endforeach; ?>

Though personally I think I would simply set the layout in the module settings, it would be faster :)

|improve this answer
  • The problem is the module is loaded twice in the template while you can define the alternative layout (from the module backend) once only. Thanks for your answer, I've managed to find the solution and will post it as an answer. Thanks – webchun Jun 26 '15 at 9:37
  • You can just assign the same module in two different positions though, which is quick, easy and effective. – Seth Warburton Jun 26 '15 at 12:03
-1

I've managed to find the solution, here's the code : 

<?php
      jimport( 'joomla.application.module.helper' );
      $module = JModuleHelper::getModule( 'mod_menu' );
      $attribs = array('style' => 'raw');
      $module->params = "menutype=mainmenu\nlayout=offcanvas\nshowAllChildren=1";
      echo JModuleHelper::renderModule($module, $attribs);
    ?>
|improve this answer
  • Once you do this you may as well just hardcode the menu as you aren't taking any of the module options set in Module Manager. Moreover, you can do exactly what you want just from within the module manager. You also can't have a 2nd menu using this method. – Seth Warburton Jul 2 '15 at 7:21
  • Actually I can have 2nd menu using by using this method but indeed this code creates additional problems than solution. Later I found that the next mod_menu (the 3rd one) module published on the same page will automatically follow the hardcoded layout no matter what layout you choose from the backend. So, for now, indeed to setup two menu modules from the backend is the most effective solution right now. Thanks for the suggestion. – webchun Jul 2 '15 at 13:26

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.