Custom menu subnav on click instead of hover

Martin_Blomgren

Not my idea as I saw it here but thought that it would be simple enough to implement so here you go!

Disables the built-in slide out submenu when hovering on a menu item with a clickable one instead. Click to open and click again on the same menu item or another to close.

Tested with IE11, Chrome 55, Firefox 45 & Edge with portal 7.2.2016.1

I've attached the files needed in a zip archive. To install just drop the files in CustomSpace (merge custom.js if you have other stuff there already!)

Adrian_Paech

Awesome!

Thanks Martin, that's perfect .

Much appreciated.

Jonathan_Boles

Thanks @Martin_Blomgren for another excellent tweak to the portal. Can't get over how awesome your shopping cart and overall portal layout is. Absolutely amazing!

Martin_Blomgren

@Jonathan_Boles thanks! Whish I had more time to rewrite my custom home app removing company specific solutions so I'm able to share it but as this is something I will do for the community it's on my free time, which at the moment is quite occupied by family and such a like. But rest assure once done I will upload it!

Leigh_Kilday

Very nice, @Martin_Blomgren. I think our users will love this. If I could suggest one improvement...

It's not obvious which nav items are links and which are menus (links have a URL in the status bar and they highlight on mouse-over, but users probably won't notice that). Could you add an symbol to the bottom-right of the nav icon to show it has subordinate items? Something like ">" I guess.

Martin_Blomgren

@Leigh_Kilday, no problem! It's in the top right corner but you can easily change the size and position of the arrow to your liking in the css.

Amarjit_Dhillon

Hi Martin, I seem to be having a problem with mine environment, when I'm click on the HARDWARE ASSETS sub nav, I have another JScript which puts in a textbox to type into/focus into however when I click into the Textbox, the menu disappears. Do you know how I could get around this?

Tom_Hendricks

Wrapping everything in lines 43-63 inside of an IF statement, such as the following, worked for me:

if (["INPUT"].indexOf(e.target.tagName) == -1) {

...lines 43-63....
}

I had the same issue, but it seems to work as intended, now.

Amarjit_Dhillon

Tom_Hendricks said:

Wrapping everything in lines 43-63 inside of an IF statement, such as the following, worked for me:

if (["INPUT"].indexOf(e.target.tagName) == -1) {

...lines 43-63....
}

I had the same issue, but it seems to work as intended, now.

Thanks Tom, all working for me now.

Tom_Hendricks

No problem, glad it is working for you.  I forgot to mention that if there are any other HTML elements that should not trigger an open or close when clicked, just add them to the array, like:

IF (["INPUT","A","SELECT"]......

I use the code that I originally posted, but if anyone ever adds other controls into the menus, the above approach could help with that ("a" might cause issues, but you see where I am heading with this).

Matt_Stewart

@Tom_Hendricks Could you share your actual modified JS for this as the line #s are not lining up for me.

Tom_Hendricks

I cannot share my exact code file, unfortunately, but I will include some of the code around this statement to help you locate it:

var ChangeToClickableSubnav = function () {
	$('#side_nav li.nav_trigger').hoverIntent({
		// Overwrite stock hover functionality
		over: function () { },
		out: function () { },
		interval: 50,
		timeout: 50
	}).click(function (e) { // Adding click functionality
		if (["INPUT"].indexOf(e.target.tagName) == -1) {
			var nav_timeout = 425, leftPos = 220;
			var $this = $(this);
			// Make sure that were not clicking on a menu already active
			if ($(window).width() > 999) {
...etc...

And I think you'll see where the closing bracket goes.

Matt_Stewart

Thanks! That last line of what you posted above, 'if ($(window).width() > 999) {', was quite different from mine. Changing that seemed to be the trick as it is working now.

Tom_Hendricks

Ah, I forgot that I tweaked that too.  Normally, I add comments around changes I make to community code but I missed that one.  That would have reminded me to share, and to explain why I did it....

You may notice that I also took the first equation out of the if statement--you might want to add it back to yours (with the OR), if you have not already.