Make parent <li> a link, navigate and expand children upon clicking. about metismenu HOT 30 OPEN

I would like the exact same functionality. When I click an expanding-menu, I want the menu to expand also to be redirecting to a page. In some cases, I would like to make sublinks like @adi10ain is doing. In other cases, I would like something like the following, where when I click the top-level menu item, it takes me to to the top of the page "link.html", and the sub-menu items provide links to bookmarks elsewhere on link.html

<li>
    <a href="link.html">Parent item <span class="glyphicon arrow"></span></a>
    <ul>
        <li><a href="link.html#item2.1">item 2.1</a></li>
        <li><a href="link.html#item2.2">item 2.2</a></li>
    </ul>
</li>

from metismenu.

I found a kind of work-around. How easy this is depends on what engine you're using to create your site. I'm using Flask, so it's pretty easy with blocks. On your main page (page1.html), you just include a link to the other page (page2.html) in the menu, with no sub-menu options. Then on the page2.html, include the sub-menus in the menu definition

page1.html

<li>
    <a href="page2.html">Parent item <span class="glyphicon arrow"></span></a>
</li>

page2.html

<li>
    <a href="page2.html">Parent item <span class="glyphicon arrow"></span></a>
    <ul>
        <li><a href="page2.html#item2.1">item 2.1</a></li>
        <li><a href="page2.html#item2.2">item 2.2</a></li>
    </ul>
</li>

from metismenu.

I've been experimenting trying to separate page link and toggle submenu items in a separate a-tag. This is my latest version: http://codepen.io/eye-wonder/pen/VpqQad

from metismenu.

Hi @onokumus
I think it's not good for user experience. The user could not know that he has to "double click" on the menu to go - it's not a common practice on a website.
The better way is:

• the menu is opened when click on <span class="glyphicon arrow"></span></a>
• the parent is opened when click on "Parent item" link

from metismenu.

The easiest way is to set the a tag in css as display: block it works for me.

from metismenu.

is <a> tag inside of the <li> tag? If not, it does not work.

from metismenu.

Apologies, I was referencing the wrong tag, I've edited my question. Is it possible to add a clickable link to the parent <li> tag that will expand the children list and navigate to the linked page?

from metismenu.

<li>
  <a href="http://www.site.com/parent">Parent Page <span class="fa arrow"></span></a>
  <ul>
    <li><a href="http://www.site.com/parent/child1">Child Page</a></li>
    <li><a href="http://www.site.com/parent/child2">Child Page</a></li>
    <li><a href="http://www.site.com/parent/child3">Child Page</a></li>
    <li><a href="http://www.site.com/parent/child4">Child Page</a></li>
  </ul>
</li>

from metismenu.

@onokumus do you understand what I'm trying to accomplish? I'd really love to use metismenu! Is it possible for the parent to link to a page or hash (www.site.com/current/page#section45) and expand the children?

from metismenu.

@chasegiunta
Please see following links.
http://www.w3schools.com/jsref/prop_loc_hash.asp
https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.hash

See sample pages
https://gist.github.com/onokumus/224181ad4627b709cdc0

from metismenu.

I am wondering about the same thing but you didn't provide any real answer. Right now a parent item will only expand/collapse. I want it to redirect me as well.

For example:

<li>
    <a href="link.html">Parent item <span class="glyphicon arrow"></span></a>
    <ul>
        <li><a href="sublink1.html">item 2.1</a></li>
        <li><a href="sublink2">item 2.2</a></li>
    </ul>
</li>

when I press "Parent item" it only expands/collapses, it does not take me to link.html. How can I achieve this?

Thanks in advance!

from metismenu.

ridiculous no answer to the question from the owner that's sad.

from metismenu.

any updates on this? I need this feature also.

from metismenu.

@indaduke, @longnd, @nnyamekye, @chasegiunta, @joelion
Hi,
Sorry for the belated answer.
First take a look at https://github.com/onokumus/metisMenu#doubletaptogo

For example .

<ul class="metismenu">
 <li>
    <a href="link.html">Parent item <span class="glyphicon arrow"></span></a>
    <ul>
        <li><a href="sublink1.html">item 2.1</a></li>
        <li><a href="sublink2">item 2.2</a></li>
    </ul>
 </li>
</ul>

<script>
$('.metismenu').metisMenu({
 doubleTapToGo: true
});

When "Parent item" link is once clicked the menu will open and when you click it for the second time, "link.html" page will be opened.

from metismenu.

This depends on how you have your site set up, but obviously if navigating causes a page reload, it won't matter if the parent item is expanded to reveal children, because metisMenu is not smart enough to reveal children on the new page.

A way to remedy this, would be an option in metisMenu to detect query parameters and expand the correlating parent node(s).

from metismenu.

The issue is that a link can only truly do one task either navigate or expand. This could be accomplished but you would have to move the Expand Collapse Icon outside the link tag. This can create other issue in styling as well.

Something like this might work with some special css styling (class mm-toggler) for the icon like floating right etc...

<ul class="metismenu">
 <li>
    <span class="glyphicon arrow mm-toggler"></span>
    <a href="link.html">Parent item</a>
    <ul>
        <li><a href="sublink1.html">item 2.1</a></li>
        <li><a href="sublink2">item 2.2</a></li>
    </ul>
 </li>
</ul>

If you add cookie support for tracking the menu state then you would have a feasible work around for this by navigating to the page from the parent link and expanding the children sub-menu onload.

See this issue for a cookie support #5

from metismenu.

You could achieve this by commenting out the line in jquery.metismenu.js that has e.preventdefault. You would also need to track which li item was clicked so that upon loading the new page, you would be able to expand navigation to the right place. You could achieve this in several ways. One mentioned was through a cookie. I preferred setting an id for the li items and appending that id to a url variable so that it could easily be pulled on the loading page. This was a dynamic nav so I just stored the navid in the db with the display and url values and it was super easy.

HTH

from metismenu.

@onokumus
your doubleTapToGo: true cause the page to reload which is bad for single page applications.

from metismenu.

I got a workaround by adding preventDefault: false and when I want to prevent the default action, I just add a .prevent-default to the element with the event handler.

$('.prevent-default').on('click', function (event) {
   event.preventDefault();
});

from metismenu.

@ziedmahdi

The doubleTapToGo option will be deprecated in the next release.

https://github.com/onokumus/metisMenu#doubletaptogo

from metismenu.

I found a work around in vanilla js.

What I did was bind click event listeners to those parent li elements (that were already behaving as drop down menus), then in the corresponding handler functions I used assignments to window.location.href to navigate to the desired page.

sample of html

<li class="dropdown spacecraft-btn-js">
    <a href="spacecraft.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspop="true" aria-expanded="false">
        Spacecraft Division<span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="consat-1.html">ConSat-1</a></li>
        <li><a href="aleksandr.html">Aleksandr</a></li>
        <li><a href="groundsegment.html">Ground Station</a></li>
    </ul>
</li>

sample of js

document.addEventListener("DOMContentLoaded", function() {
    // get nav button
    var spaceCraftBtn = document.querySelectorAll('.spacecraft-btn-js')[0];

    var navigateToSpaceCraft = function() {
        window.location.href = 'spacecraft.html';
    }

    // bind listeners to dropdown button hybrids
    spaceCraftBtn.onclick = navigateToSpaceCraft;
});

from metismenu.

<ul>
	<li>
		<a href="">A</a>
	</li>
	<li>
		<a href="">B</a>
	</li>
	<li>
		<a href="">C</a>
	</li>
</ul>

function openainside(e) {
	window.open(e.children[0].getAttribute('href'), '_same');
}

window.addEventListener('load', ()=> {
	var lis = document.querySelector('ul').children;
	for (var i = 0; i < lis.length; i++) {
		lis[i].setAttribute('onclick', 'openainside(this)');
	}
});

from metismenu.

Wouldn't adding: onclick="window.location.href='/admin/index.html';" also work?

As in:

<li>
  <a class="has-arrow " href="#" aria-expanded="false" onclick="window.location.href='/admin/index.html';">Admin</a>
  <ul aria-expanded="false" class="collapse">
    <li><a href="/admin/orders.html">Orders</a></li>
...

from metismenu.

And good solution to link the a tag and open menu with arrow?

from metismenu.

The easiest way is to set the a tag in css as display: block it works for me.

is this solution still up to date? Any example?

from metismenu.

The easiest way is to set the a tag in css as display: block it works for me.

is this solution still up to date? Any example?

Yes! :)

from metismenu.

Simplest way to handle this would be by inserting a selector and jquery:
`href="/go-somewhere" class="breakoutMetis"

$(".breakoutMetis").click(function () {
window.location = $(this).attr("href");
});`

from metismenu.

I've been experimenting trying to separate page link and toggle submenu items in a separate a-tag. This is my latest version: http://codepen.io/eye-wonder/pen/VpqQad

Hi! Thank you for the codepen. Have you done any changes in the original js?

I am asking because its not working with the latest version of metismenu.

By the way - this is the best solution so far. it best corresponds to the habits of a DAU.

from metismenu.

I've been experimenting trying to separate page link and toggle submenu items in a separate a-tag. This is my latest version: http://codepen.io/eye-wonder/pen/VpqQad

Hi! Thank you for the codepen. Have you done any changes in the original js?

I am asking because its not working with the latest version of metismenu.

By the way - this is the best solution so far. it best corresponds to the habits of a DAU.

I haven't been working with menus like this for a while and I don't know the latest versions of MetisMenu. The last part of the javascript (click outside) is custom. The latest version of MetisMenu might also use different classes and/or IDs.

With the old one it looks like I activated the whole thing for this menu towards the end.

$(function () {
      $('#menu1').metisMenu();
  });

There might be other issues like missing jQuery or jQuery version or other settings or components. First take a look at this https://github.com/onokumus/metismenu#migrating-to-v3-from-v2

Also remember that the codepen is a proof-of-concept. It might work cross browser, but the CSS is far from tidy and optimized.

from metismenu.

I want to share an update of the split-button solution with you. Its working with the latest version.
Split Button Menu

from metismenu.