CSS3 Responsive Menu Layout

I'm putting together a home automation / remote control system to run on my Raspberry Pi and allow me to control various devices around the house. I wanted to create a web interface that would work equally well on a laptop and phone which led me to put together a responsive web layout using CSS only which displays the navigation differently depending on the screen size.

Responsive Web Design is an approach to web development whereby a single dynamic layout provides an optimum experience regardless of the screen size or resolution it is being displayed on.

The viewport meta tag instructs mobile browsers to report a screen resolution proportional to the physical screen size. There is an excellent article on its use here.

<meta name="viewport" content="initial-scale=1.0;">

CSS3 media queries allow us to apply different CSS rules to elements depending on the screen size:

  /* mobile */
  @media screen and (max-width:540px)
  {
    .navmenu {
      text-align: center;
      margin: 0;
    }
  }
  
  /* desktop */
  @media screen and (min-width:540px)
  {
    nav {
      min-height: 200px;
      display: inline-block;
    }
  }

This allowed me to create the layout you can see here which displays a menu on the left hand side of the screen if the browser width is greater than 540 pixels and across the top of the screen for widths less than 540 pixels.

Desktop:

Mobile: