Skip to main content

YOOtheme Pro
Build a real accordion menu (mobile-dialog)

To use the normal Joomla menu module, which contains all menu- and submenu-entries, in the offcanvas-position (mobile-dialog) without the restriction of having to use «separators» to toggle the submenu, you could use the following scripts:

Menu-type has to be set to «Nav» in the menu module-settings / in the module-builder.

I used this on a company website to be able to use the «normal» Joomla menu module and display its content as accordion-nav in yootheme pro, without having to add separators or other unwanted stuff to the menu itself.

Real accordion menu with level 2 submenus:

Use the following script in Settings → Advanced → Custom Code

1. To indicate, that the menu is an accordion-menu (which allows to open multiple items)
<script>
jQuery(function($) {
    $('.uk-offcanvas-bar .uk-nav.uk-nav-default').attr('uk-nav','multiple: true').attr('uk-nav', 'targets: > .js-accordion').addClass('uk-nav-accordion level1');
}); 
</script>
2. Indicate, that the first-level submenu is also an accordion-menu (which allows to open multiple items)
<script>
    jQuery(function($) {
        $('.uk-offcanvas-bar .uk-nav.uk-nav-default .uk-nav-sub').attr('uk-nav-sub','multiple: true').attr('uk-nav', 'targets: > .js-accordion').attr('id', 'subnav').addClass('uk-nav-accordion level2');
    }); 
</script>
3. Give the second-level submenu(s) a separate class
<script>
    jQuery(function($) {
        $('.uk-offcanvas-bar .uk-nav.uk-nav-default .uk-nav-sub ul').attr('id', 'sub-subnav').addClass('uk-nav sub-subnav');
    }); 
</script>

4. Add the correct class «js-accordion» to the parent items

<script>
    jQuery(function($) {
        $('.uk-offcanvas-bar .uk-nav.uk-nav-default li.uk-parent').addClass('js-accordion');
    }); 
</script>

5. To add a unique ID to the subnavs

<script>
    jQuery(function($) {
        $('.uk-nav-sub').each(function(n) {$(this).attr('id', 'subnav' + n)});
}); 
</script>

6. To add a unique ID to the second-level subnavs

<script>
    jQuery(function($) {
        $('.sub-subnav').each(function(n) {$(this).attr('id', 'sub-subnav' + n)});
}); 
</script>

7. Add wrapper code in order to separate the toggle from the menu-entry and to open the first-level submenu by clicking the toggle

<script>
    jQuery(function($) {
        $('.uk-offcanvas-bar .uk-nav.uk-nav-default>li.uk-parent>a').wrap('<div class="tm-grid-expand uk-grid-column-small uk-grid" uk-grid><div class="uk-width-expand"></div></div>').addClass('uk-panel uk-width-expand');
        $('.uk-offcanvas-bar .uk-nav.uk-nav-default li.uk-parent .tm-grid-expand').append('<div class="uk-width-auto"><div><a class="uk-toggle level2"><span uk-icon="icon:chevron-down" class="uk-icon"></span></a></div>')
}); 
</script>

8. Add wrapper code in order to separate the toggle from the submenu-entry and open the second-level submenu by clicking the toggle

<script>
    jQuery(function($) {
		$('.uk-offcanvas-bar .uk-nav-sub.level2 li.uk-parent>a').wrap('<div class="tm-grid-expand uk-grid-column-small uk-grid" uk-grid><div class="uk-width-expand"></div></div>').addClass('uk-panel uk-width-expand');
        $('.uk-offcanvas-bar .uk-nav-sub.level2 li.uk-parent .tm-grid-expand').append('<div class="uk-width-auto"><div><a class="uk-toggle level3"><span uk-icon="icon:chevron-down" class="uk-icon"></span></a></div>')
    }); 
</script>
9. Find the closest subnav for each first-level submenu toggle and set the correct target-id
<script>
    jQuery(function($) {
    	$('a.level2').each(function () {
    	var id = $(this).closest('li').find('.uk-nav-sub').attr('id');
    	$(this).attr('uk-toggle', 'target:#' + id);});
	});
</script>
10. Do the same for second-level submenu toggles
<script>
	jQuery(function($) {
    	$('a.level3').each(function () {
    	var id = $(this).closest('li').find('.sub-subnav').attr('id');
    	$(this).attr('uk-toggle', 'target:#' + id);});
	});
</script>
11. Make the toggle turn onclick
<script>
    jQuery(function($) {
        $('a.uk-toggle').on('click', function () {
    	$(this).toggleClass('rotate');});
    });
</script>
12. Don't forget to add the desired transformation of the toggle in the CSS section
.uk-toggle.rotate svg {transform: rotate(180deg)}