Javascript Menu / Posts /

Mobile Device Error

1
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?
Jon  5 years ago   viewed: 5541    

1 Answer

-1
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. 
Jon   5 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: