There are many scripts and tutorials available for responsive menu handling on small (mobile) screens. More and more people use smartphones to gather informations on various webpages. Having a fully responsive website structure is already mandatory. A Menu is built with unordered lists. We need to move a horizontal list into a vertical dropdown list. We use JQuery and CSS for this. Jquery to get the actual window size and css to re-create the menu structure. Below are a few links which will help you to achieve the result you see in the iphone screenshot to the right.
Code Snippets and Tutorials for Responsive Menu Structure
- http://lukaszfiszer.github.com/selectnav.js/ (easy and flexible *thumbsup*)
- http://css-tricks.com/convert-menu-to-dropdown/ (quick tutorial)
- http://tinynav.viljamis.com/ (basic)
- http://filamentgroup.com/lab/responsive_design_approach_for_navigation/ (haven`t tried it yet but this looks like a very smooth solution with the “testfit” event handling)
There are way more code snippets but I think at least one of the links above will help you to get a responsive menu structure for mobile usage. Feel free to add other tutorials/Githublinks through the comments. I`m always open for other coding solutions and different approaches.