View Full Version : Smooth Navigational Menu (v1.51) hidden submenu causes scrolling on iPad

02-07-2013, 07:52 PM
1) Script Title: Smooth Navigational Menu (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem:
Usihng the updated version described in http://www.dynamicdrive.com/forums/showthread.php?72825-Smooth-Navigational-Menu-(v1-51)-on-Android-Tablet I have this problem which only seems to be a problem on the iPad (and iPhone).

The first level submenus start out with display:block and visibility:none, so that they are not visible to the user. In my example, one of the submenu's initial position is off the right side of the page. iPad and iPhone browsers react to an object that is bigger than the page by making the page by horizontally scrollable, and sometimes setting an initial scroll position that is not great. The is undesrable.

When I touch on the high-level menu to display the submenu in question, it gets properly positioned and the horizontal scrolling problem goes away.

Possible solutions:
- use display:none to hide the submenu initially instead of visibility:hidden
- put the submenu in it's display position at initialization time (but this won't help if the window is resized after initialization)

Here is a screen shot of the FireBug display of one of the submenus before it is shown.


02-07-2013, 09:43 PM
In the ddsmoothmenu.css file, around line #50, make the highlighted change:

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: -3000px;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;

The browser cache may need to be cleared and/or the page refreshed to see changes.

02-08-2013, 03:25 PM
It works! Thank you. :)