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)}
