Home Community Uploads
image

Cireson Partners, Customers and Community members share your customizations and examples here to help benefit the community as a whole to earn Kudos and badges.

DISCLAIMER

All files and projects located here are provided and come "as-is" and without any warranty or support. Use at your own risk. Your use of Community Uploads is subject to our Terms of Use.

Cireson does not and will not support or maintain these enhancements, extensions, and scripts.

For Team Cireson uploads click here.

Custom menu subnav on click instead of hover

Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
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!)

Comments

  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    Awesome!

    Thanks Martin, that's perfect :).

    Much appreciated.

  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    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_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @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_KildayLeigh_Kilday Member Ninja IT Monkey ✭✭✭✭
    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_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @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_DhillonAmarjit_Dhillon Customer Adept IT Monkey ✭✭
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_DhillonAmarjit_Dhillon Customer Adept IT Monkey ✭✭
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_StewartMatt_Stewart Customer IT Monkey ✭
    @Tom_Hendricks Could you share your actual modified JS for this as the line #s are not lining up for me.
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_StewartMatt_Stewart Customer IT Monkey ✭
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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.
Sign In or Register to comment.