When using Zend2 navigation from an array passed in Zend\Navigation\Navigation, everything works smoothly if child items are opened on parent item mouse hover. However, undesirable actions occur when they are opened on mouse click, as the user is unable to directly access the child page. Instead, the first page from the parent menu item is opened.
<nav>
<ul class="sidebar">
<li>
<a class="item-1" href="parent-page1">Parent page1</a>
<ul>
<li>
<a class="item-1" href="child-page11">Child page11</a>
</li>
<li>
<a class="item-1" href="child-page12">Child page12</a>
</li>
</ul>
</li>
<li>
<a class="item-1" href="parent-page2">Parent page2</a>
<ul>
<li>
<a class="item-1" href="child-page21">Child page21</a>
</li>
<li>
<a class="item-1" href="child-page22">Child page22</a>
</li>
</ul>
</li>
To solve this issue, it would be helpful to have an option to remove the "href" attribute from the parent item completely. Unfortunately, I could not find such an option in the Zend2 documentation or examples. I believe there must be a way to handle menus with clickable parent items, as they are commonly used in popular admin panels like AdminLTE.
Currently, my workaround involves adding 'class' => 'not-active' to each parent item in the navigation array and then using JavaScript in the application layout to remove the "href" attribute:
window.onload = function () {
x = document.getElementsByClassName("not-active");
for(var i=0,j=x.length; i<j; i++){
x[i].removeAttribute("href");
};
}
EDIT
I finally found a solution by adding a new route in module.config.php:
'empty' => array(
'type' => 'Zend\Mvc\Router\Http\Literal',
'options' => array('route' => '#'),
),
Then, I utilized this route in the navigation array:
array(
'label' => 'Parent page1',
'route' => 'empty',
'controller' => 'admins',
'resource' => 'Admin\Controller\Admins',
'privilege' => 'index',
'pages' => array(
array(
'label' => 'Child page11',
'route' => 'admin/default',
'controller' => 'admins',
'resource' => 'Admin\Controller\Modules',
'privilege' => 'index',
),
array(
'label' => 'Child page12',
'route' => 'admin/default',
'controller' => 'modules',
'resource' => 'Admin\Controller\Modules',
'privilege' => 'index',
),
),
),
EDIT 2
Unfortunately, the solution does not work when the site is located in a subpath.
For example,
<a href="#">Parent 1</a>example.com,
while
<a href="subpath/#">Parent 1</a>example.com/subpath/.
As a result, I am back to using post-processing in JavaScript :(