Responsive Menu Tutorial for HTML Web Pages, No JQuery

HTML Menu Bar Which Switches to Dropdown for Mobile

For a web site to be successful it must tick several boxes. It needs an attractive design, great content, no pop-ups, not throw to many advertisements at visitors and work well on a variety of screen sizes. The last point is important as mobile devices are now the dominant platform for accessing the web. Achieving multi-screen support from a single web site saves time (no need to update the design more than once). Time is a precious resource for most people and businesses.

A web site needs to respond to the device it is being viewed on, hence the term responsive design. When a website uses a menu to allow the viewer to jump to other pages, that menu should work well on different screen sizes. This article is a responsive menu tutorial giving an example implementation of the Responsive Nav plugin. This provides a basic responsive web site menu without using any other frameworks or libraries. As the screen shrinks the menu switches from traditional horizontal to a button. The button is used to dropdown the menu on smaller screens. Continue reading

Android Menu Vs Action Bar with Example Code

An Android Menu in Your App

When a new Android App project is created in the Eclipse or Android Studio IDEs there is the option to create a default activity (the Create Activity option in the New Android Application wizard). If the option is checked and Blank Activity is chosen a simple App ready to run is generated. This App simply shows the message Hello world! on the device screen (see Your First Android Hello World Java Program).   This simple App has a menu with one item called Settings. On devices with a physical (hardware) menu key, the Settings menu option appears at the bottom of the screen, when the key is pressed:

Basic Android Menu Option

On devices without a hardware menu key, Android Version 3.0 and later devices (API level 11+), an icon in the Action Bar shows the Settings menu item. This icon is referred to as the action overflow. However, due to it’s stacked appearance in this article it will be referred to as the menu icon:

Action Bar with Basic Android Menu

The above two screens show the older Android menu vs Action Bar menu, i.e. pre-Honeycomb using the physical menu key, and post-Honeycomb menu using the Action Bar icon (3 small stacked boxes icon know as action overflow). Further differences in use are examined in this article with code examples. Here is the code for this basic App: Continue reading