Is it possible to set first menu item (with mega menu dropdown) be selected on page load
Permalink Browser Info Environment
Is it possible to set the first menu item (with mega menu dropdown) be selected on page load? I would like the dropdown mega-menu items connected to the first menu item to be displayed, as a default, when the page loads. Can this be done easily?
| Type: | Discussion |
|---|---|
| Status: | Resolved |
JB,
Thanks for the quick reply.
Would it work to put this code in an HTML block on the page?
And, if so, could you reply with a full example of the code using pl-609 as the target class?
I've been experimenting with the options you gave me with no effect, so I must be leaving something out - or it doesn't work within an HTML block?
Thanks!
Steve
Thanks for the quick reply.
Would it work to put this code in an HTML block on the page?
And, if so, could you reply with a full example of the code using pl-609 as the target class?
I've been experimenting with the options you gave me with no effect, so I must be leaving something out - or it doesn't work within an HTML block?
Thanks!
Steve
Sure Steve.
Yes, a HTML block will do the job, just add something like this:
This is assuming that jQuery is already part of your theme. If you're not sure, just view the source code of the page and look for anything named jquery.js (or similar) to double check it's being loaded. If it is not, then the above code will produce an error. In that case there is a workaround to use vanilla Javascript, but it's just a bit more verbose.
Hope this helps.
JB
Yes, a HTML block will do the job, just add something like this:
<script> $("li.pl-609 a.top-level-nav").click(); </script>
This is assuming that jQuery is already part of your theme. If you're not sure, just view the source code of the page and look for anything named jquery.js (or similar) to double check it's being loaded. If it is not, then the above code will produce an error. In that case there is a workaround to use vanilla Javascript, but it's just a bit more verbose.
Hope this helps.
JB
JB,
Thank for your efforts to help me, but this is not yet working for me. This code example is exactly what I tried. I have placed the html block with this code on the page above the stack block that contains the mega-menu with drop-down and alternatively tried it within the stack, at the top.
The first option didn't show any results. The second option did seem to trigger the drop-down, but all the image links were broken, producing 404 errors. I checked the source code for use of *.js files and found them, so I'm guessing this means jquery is loaded and in use, correct?
I also tried installing the css code within style tags in an html block, but that shows no effect. Can you tell me what I might be doing wrong? I'm thinking the css option might be my best option if I can get it to work, just to avoid jquery conflicts. So, could you teach me how to make that work?
Thanks!
Steve
Thank for your efforts to help me, but this is not yet working for me. This code example is exactly what I tried. I have placed the html block with this code on the page above the stack block that contains the mega-menu with drop-down and alternatively tried it within the stack, at the top.
The first option didn't show any results. The second option did seem to trigger the drop-down, but all the image links were broken, producing 404 errors. I checked the source code for use of *.js files and found them, so I'm guessing this means jquery is loaded and in use, correct?
I also tried installing the css code within style tags in an html block, but that shows no effect. Can you tell me what I might be doing wrong? I'm thinking the css option might be my best option if I can get it to work, just to avoid jquery conflicts. So, could you teach me how to make that work?
Thanks!
Steve
Hi Steve,
The code I provided should be placed after the mega menu - otherwise, if it placed before it, then the browser doesn't know about the elements which it is being applied to (since they haven't loaded yet). It also needs to go after the jQuery initialization (because they won't exist yet if the custom code is placed too early).
I can't see how that line of code would affect image links - that seems like it would be something else. Or perhaps if there is a Javascript error and the images are using a JS-based lazy-loading plugin, that could be the cause.
The only issue with a CSS solution is that it would be hard to effectively hide the menu without interfering with "normal" mega menu behaviour.
If you can provide a link where you've added your code I can take 1 more closer look. However, since what you're trying to do is a customisation (outside normal behaviour for the add-on), typically this would fall into my custom programming service which is US$90/hr (min 15 minutes). If I can give you a quick fix, I will, but I do have to draw the line somewhere as I'm sure you can understand.
The code I provided should be placed after the mega menu - otherwise, if it placed before it, then the browser doesn't know about the elements which it is being applied to (since they haven't loaded yet). It also needs to go after the jQuery initialization (because they won't exist yet if the custom code is placed too early).
I can't see how that line of code would affect image links - that seems like it would be something else. Or perhaps if there is a Javascript error and the images are using a JS-based lazy-loading plugin, that could be the cause.
The only issue with a CSS solution is that it would be hard to effectively hide the menu without interfering with "normal" mega menu behaviour.
If you can provide a link where you've added your code I can take 1 more closer look. However, since what you're trying to do is a customisation (outside normal behaviour for the add-on), typically this would fall into my custom programming service which is US$90/hr (min 15 minutes). If I can give you a quick fix, I will, but I do have to draw the line somewhere as I'm sure you can understand.
Hi JB,
Sorry for my late reply to your last reply. My main computer went down over a week ago and I'm just getting back to normal with a replacement.
Anyway, thanks for all the advice, and I understand this situation is worthy of payment for your services. I'm not having much luck and I'm happy to compensate you for your help. I'll PM you my login info. Please take a look at it and see if you can find a quick fix.
Thanks!!
Sorry for my late reply to your last reply. My main computer went down over a week ago and I'm just getting back to normal with a replacement.
Anyway, thanks for all the advice, and I understand this situation is worthy of payment for your services. I'm not having much luck and I'm happy to compensate you for your help. I'll PM you my login info. Please take a look at it and see if you can find a quick fix.
Thanks!!
Every menu item (including submenus) have a unique class so they can be easily styled. What you're trying to do could be done with a small line of custom CSS or JS (depending on your preferred approach). The only tricky bit to consider from a usability perspective is how to remove the submenu if the user doesn't want to see it. Since the default method is to show menu items on mouse hover, this could be problematic as the mouse likely starts off the actual menu - and as soon as the user moves their mouse, the default action of hiding the menu (on mouseout) will fire. Instead of you choose to active the menu on a click this will be much easier to create (my recommendation).
In this case, just trigger a "click" even using Javascript.
Here's a screenshot of the demo on my website:http://c5extras.com/add-ons/mega-menu/...
http://snpy.in/BHPUQg
In this case the list item has a CSS class of "pl-219", so it's easy to target the top-level link within it.
If using jQuery, the code would be:
[code]
$("li.pl-219 a.top-level-nav").click();
[code]
Simply add that HTML code (wrapped by "script" tags) anywhere on the page, and it will trigger the menu on load.
Hope this helps.
JB