Saturday, November 21, 2015

Simple Menu for Mobile Device

There has been much written on "responsive" web design, which automatically changes to a simplified page layout for mobile devices. However, an even simpler alternative is to use an uncomplicated page design for all devices. One example is not to have complex menu bars.

The usual design has a line of menu options across the top of the page. With a responsive design this become just one menu button on a mobile device (represented by a column of horizontal lines). I decided to just have one menu button on my home page all the time.

Instead of using an image to display the menu button, I used the character "☰" (trigram for heaven Unicode Character 2630). I labeled the menu items with a class and in the CSS included "display: none;" and "hover  {display: block;}". So that the menu options only appear when the cursor is over them and then the page content is pushed down out of the way.

No comments: