Saturday, October 11, 2014

Basic HTML5 Restaurant Menu Template

Description:

An instructor friend of mine was creating a homework exercise for a basic HTML class. He's been teaching photography for a while and hasn't done a lot HTML coding recently, so he asked me to give him a hand.

After looking at his requirements, I came up with the following menu template. Here are the main features of the template:

  1. It's an HTML5 Document.
  2. No classes or ID's are used to target page elements, just CSS selectors.
  3. Menu items are in a table for accessibility, but laid out visually with CSS so it doesn't look like a table.
  4. This menu is fully responsive without a single media query. All widths are percentage based.

Notes:

It's a nice simple menu template in HTML5 and CSS3. It utilizes normalize.css to smooth out browser inconsistencies. To keep it simple, it is IE9+ compatible (modern browsers only). As it was designed for class use, the code is very well commented.

The demo page can be viewed here:

Food Menu Demo

The files can be downloaded here:

FoodMenuDemo.zip

No comments:

Post a Comment