Drop Down Menu Issues

Hey there - I am working on a dynamic drop down menu on a Volusion e-commerce site here. Trying to style it a little differently but keep it dynamic and I cannot for the LIFE of me find where I need to edit to make the drop downs line up.

View the issue here

I’ve tried to do this several ways, positioning, margins, etc - I think it happened when I stuck the search bar in there next to it. I am missing something and appreciate your help in advance to point me in the right direction. :cool:

Best,
Kari

Hi,

Those old fashioned menus are a real pain and should be dumped for something more modern and accessible.

However I think your issue is that the menu needs to be placed after page load rather than before it because it is positioned relative to the viewport and loses track with the centred page.

Try out the techniques mentioned here in the documentation as I just tested the buildafterLoad parameter and it moved the menu to the right position although it seemed to lose its styling locally.

Yeah, I know. I wish they were more accessible and current but could remain dynamic. That’s important to the clients. :slight_smile:

I did method 1, and it appears to have lined it up but you are right - it lost the styling. I will try to figure out why unless you have any ideas - ??

Well this is interesting - I found the data file for the milonic menu, changed positioning from relative to absolute, and gave it a negative left margin. Working in all so far but IE8 - ? Do you think there’s a cleaner way - ? The buildAfterload parameter worked EXCEPT for the loss of styling - and it didn’t line up properly either - ?

If the current page has been updated with your new code then I’m afraid its not working.

You seem to have just adjusted it fit the screen size you happen to be viewing at and should you open or close the window the menu will be misplaced which means 99% of your visitors will see it in the wrong place. (The original menu worked properly only if your page was aligned left because the offset was taken from the viewport and not the page width itself.)

I believe the solution is somewhere in the details that I mentioned before because the positioning of the menu was perfect locally and at any screen resolution. However I will have to have an another look and see if I can work out why the styling was lost.

These menus are always a pain to fix and any menu that relies on javascript to function fully should be avoided at all costs. There is no graceful degradation in this menu when JS is switched off - it just disappears. I guess also that search engines will fail to index the site because they won’t have links to follow - not to mention accessibility issues.

I just grabbed the scripts from this page and inserted them in the same position in your page and the menu worked straight away and was in the correct position for all window sizes although of course the styling was as the original menu of course.

I suggest that you revert to the original menu code and scripts and start again following that working example as a base a something must have gone awry along the line. This is a “paid for” script so you should be bale to get support at the owners site assuming that you have a legal copy which of course is a prerequisite.

Otherwise I could move this to the JS forum as someone there may have a better answer.

THanks so much. Yes, I agree wholeheartedly. I think it’s because I stuck that search bar in to the right of it, but who knows really. I was just trying to keep it connected dynamically to the software for easy updating -
I will investigate the JS methods or just do away with it entirely.

Thanks so much for your help -