getuikit and accordion nav

[neophron]

Hi guys,

for a website, the client wishes a mobile menu with an accordion nav. Since I'm using UIkit in the frontend, I implemented this https://getuikit.com/docs/nav with Somas MarkupSimpleNavigation module.

The problem is, that the accordion nav solution from UIkit converts all parent pages into accordion triggers. You can't access these pages by clicking on it. I've seen other solutions, where only the arrow or plus icon is the trigger and the name is the link.

This is my code:

<?php
 $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
 $options = array(
	 'parent_class' => 'parent',
	 'current_class' => 'current',
	 'has_children_class' => 'has_children uk-parent',
	 'levels' => true,
	 'levels_prefix' => 'level-',
	 'max_levels' => 3,
	 'firstlast' => false,
	 'collapsed' => false,
	 'show_root' => true,
	 'selector' => 'template!=basic-page-hidden',
	 'selector_field' => 'nav_selector',
	 'outer_tpl' => '<ul class="level_1 uk-nav-primary uk-nav-parent-icon" uk-nav>||</ul>',
	 'inner_tpl' => '<ul class="level_2 uk-nav-sub">||</ul>',
	 'list_tpl' => '<li%s>||</li>',
	 'list_field_class' => '',
	 'item_tpl' => '<a href="{url}">{title}</a>',
	 'item_current_tpl' => '<a href="{url}">{title}</a>',
	 'xtemplates' => '',
	 'xitem_tpl' => '<a href="{url}">{title}</a>',
	 'xitem_current_tpl' => '<span>{title}</span>',
	 'date_format' => 'Y/m/d',
	 'code_formatting' => false,
	 'debug' => false
 );
 echo $treeMenu->render($options);
 ?>

This the result, where the parent pages are triggers.
So, I'm looking for a solution, where the only the arrows are triggers. 

[pwired]

Quote

The problem is, that the accordion nav solution from UIkit converts all parent pages into accordion triggers.
I've seen other solutions, where only the arrow or plus icon is the trigger and the name is the link ......

You can keep on using UIKit but it is not a silver bullet solution for any situation. Find any mobile menu/accordion navigation
on jqueryscript dot net for free with code examples, and demos ready for you to use with processwire.
Have a look here: https://www.jqueryscript.net/

 

[pideluxe]

You could also add the parent element as first element in the sub nav. The processwire website does it also this way.

[neophron]

18 hours ago, pwired said:

You can keep on using UIKit but it is not a silver bullet solution for any situation. Find any mobile menu/accordion navigation
on jqueryscript dot net for free with code examples, and demos ready for you to use with processwire.
Have a look here: https://www.jqueryscript.net/

 

Thanks for the link, I had this link buried somewhere in my bookmarks. Sadly most of the nav examples are equal to the UIkit accordion, where a parent page is only a trigger.

 

13 hours ago, pideluxe said:

You could also add the parent element as first element in the sub nav. The processwire website does it also this way.

The big screen navigation has the usual dropdown (ul.level_2) 

You mean adding a redirection link to the parent page, based on a template that can be hidden via:
'selector' => 'template!=basic-page-hidden',

home
parent-page 01
   parent-page 01 (redirect)
   child-page
   child-page
   child-page
parent-page 02
   parent-page 02 (redirect)
   child-page
   child-page
   child-page
about
contact