Doing it with style
Another menu conversion to work with the Safari Mobile browser used on the iPad, iPhone and iPod Touch.
This one has the top level links centered in the menu bar and the dropdown/flyouts sub menus as wide as the longest text. The sub menu dropdowns can be aligned to the left or right of the top level links and the flyouts can flyout to the right or left so that the menu will stay within the boundaries of the page.
CSS3 enhancements have been added for browsers that support them, here are corner radii on the top level and sub menus with drop shadows on the sub menus.
The iPad, iPhone and iPod Touch will show a 'Close Menu' graphic centered above the menu when a top level link with a sub menu is tapped. This can be tapped to close the sub menus.
This menu has been tested in IE6, IE7, IE8, IE9, Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, Avant, iPhone, iPod Touch and iPad.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.