I'm having an issue using the horizontal single level menu slider with a responsive page design. I'm using @media CSS sizing. When the page is loaded with the #menu display set to 'none', and then then set to 'block' on resize, the menu does not function. The li elements are stacked on top of each. The menu functions properly when loaded with the display as 'block'.
This is an issue because a tablet can change page width based on orientation. With portrait I use a different menu system. With landscape I use this menu system.
I believe it has something to do with the way the javascript creates the menu on load. There error is possibly that the width is undefined if the #menu has its display originally set to 'none'.
Is there a way to reinitialize the menu with an onResize event?
I found a solution. When the page loads with the menu display set to 'none'; instead I:
visibility:hidden;
position:absolute;
z-index:-1;
width:2000px;
The above forces the menu to initialize properly. The following resizing @media CSS formats the menu correctly. It now displays properly at all time.