YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar michael.maass Support asked

[Tutorial] How to get an "Accordion" style offcanvas menu

If you have a lot of sub-menu items you might want the "offcanvas" menu parent menu items to be collapsible in an "accordion" style:

Image

This can be done via a customization.

The only aspect to bear in mind: Any parent menu item you have pointing to an actual link will not work to lead to this target anymore. Its href will be "neutralized" to a # so it can work as a collapsible parent which can be opened and closed without the page being changed or reloaded.

The behaviour of this modified offcanvas menu is basically the same as that of an "Accordion" menu in a Warp 7 sidebar menu.

To get this kind of offcanvas menu please try and carefully follow these steps:

  • If you have not done so yet create a custom style. This is achieved in less than two minutes and should be done anyway once you start to customize your site.

    For detailed instructions and recommendations please take a look at the "[Tutorial] Create a custom style for a Warp 7 template".

  • Once you have a custom style activate it for all your layout profiles. Otherwise the modifications will not show any effect.

    If you are not familiar with the use of layout profiles please take a look at the "[Tutorial] Warp 7: Understanding layout profiles".

  • Access your site's root via FTP.

  • If it does not exist yet create a folder named layouts inside your style's main folder:
    templates/yoo_TEMPLATE/styles/YOURSTYLE/layouts/ (Joomla) or
    wp-content/themes/yoo_THEME_WP/styles/YOURSTYLE/layouts/ (WordPress)

Important: From this point on all paths will be named relative as seen from the first level of the templates/theme folder, so there should be no differences between the Joomla and WordPress instructions.

  • Copy the file
    layouts/widget.php to
    styles/YOURSTYLE/layouts/widget.php

  • Use a text editor capable of UTF-8 encoding to open
    styles/YOURSTYLE/layouts/widget.php

  • Look for this particular condition starting around line 59 (depending on the version the line number might slightly vary!):

        } else if (in_array($widget->position, array('offcanvas'))) {  
            $renderer = 'nav';  
            $widget->nav_settings["modifier"] = "uk-nav-offcanvas";
    

    and add a further line as follows (only the last line is the addition!):

        } else if (in_array($widget->position, array('offcanvas'))) {  
            $renderer = 'nav';  
            $widget->nav_settings["modifier"] = "uk-nav-offcanvas";  
            $widget->nav_settings["accordion"] = true;
    
  • Save and close the file.

  • In your style's folder create a new folder js
    styles/YOURSTYLE/js/

  • Copy the file
    js/theme.js to
    styles/YOURSTYLE/js/theme.js

    and rename it to

    styles/YOURSTYLE/js/accordion-parent.js

  • Use a text editor capable of UTF-8 encoding to open
    styles/YOURSTYLE/js/accordion-parent.js
    and fully replace all the existing content by exactly the following:

    /* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */  
    
    jQuery(function($) {  
    
        // "Neutralize" the URL in parent menu items for an accordion style offcanvas menu  
        $(".uk-offcanvas-bar .uk-parent > a").attr("href", "#")  
    
    });
    
  • Save and close the file.

  • Copy the file
    layouts/theme.config.php to
    styles/YOURSTYLE/layouts/theme.config.php

  • Use a text editor capable of UTF-8 encoding to open
    styles/YOURSTYLE/layouts/theme.config.php
    and fully replace all the existing content by exactly the following:

    <?php  
    
    require(__DIR__.'/../../../layouts/theme.config.php');  
    
    // add script  
    $this['asset']->addFile('js', 'js:accordion-parent.js');
    
  • Save and close the file.

Reload the page in the frontend, and test the "offcanvas" behaviour.

Thank you


Further reading:

  • Joomla
  • WordPress
  • Tutorial

10 Answers

0

Avatar lionweb answered

Hi Michael,

I followed your instructions and it works almost perfect.

There is just one issue: when clicking an item for the first time it does nothing. Only after 2nd click it starts working. How can I make it fully working?

Thank you

Edited

0

Avatar tangent.design.pty.ltd answered

@Lionweb. I've got the same issue of not working for the first time clicking. Did you fix it?

Thanks

0

Avatar macpalm answered

Hi

I've followed the instructions and i am having a slight different issue. The main menu headings are linking to their respective pages, rather than these links not working as explained would happen.

Can a fix be provided please?

Thanks

0

Avatar macpalm answered

Hi Michael

I have followed these instructions and whilst the accordion feature works as it should, it appears to have triggered an issue with the main menu.

See post: https://yootheme.com/support/question/96206

Are you able to help me resolve this please?

Thanks

Paul

0

Avatar andreas.schoeneberg answered

Hi Michael,

this is really a nice tutorial and it works fine, but ... unfortunately it only works in the first menu level. Is there any chance to have that accordeon function for 2nd and 3rd level, too? I have a project with a very complex menu with loads of menu items.

Many thanks for any suggestion.

Andreas

0

Avatar tangent.design.pty.ltd answered

Hi Support team,
It didn't work for the first time clicking. It only starts working for the 2nd time. Is this issue sorted out anyone?

0

Avatar christian.van.laarhoven answered

Hey Michael,

Thanks for this great tutorial. It does work but there's something wrong i guess. I have to click twice on the menu item to expand, but that's only on the first time the page load. Is there something i can do about this little bug? I added the code exactly like you mentioned in your tutorial.
You can find it on this website

/////
edit

i fixed it to do the following:
i added this code to accordion-parent.js

jQuery( ".uk-offcanvas-bar .uk-nav li" ).removeClass( "uk-open" );

Kind regards,
Van Laarhoven ICT
Hugo van Leeuwen

Edited

0

Avatar rozalie.e.hollis answered

This is great and works perfectly, but how can you achieve the same for further down menu items. Home -> Sub Menu -> Sub Sub Menus -> Menu Item.

  1. Home
  2. Parent Item
    1. 1 Foo
        1. 1 Foo1
        1. 2 Foo2
  3. Bar
  4. Whatever

Thanks,

0

Avatar cahoot answered

That's perfect, thanks Michael!

Know someone who can answer? Share a link to this question via email or twitter.