mhead tutorial

Creating a beautiful navigation header using the jQuery.mhead plugin is really easy. Just follow the steps in this mobile header tutorial.

Setup the webpage

If you can, it is recommended to use the HTML5 doctype.

<!DOCTYPE html>
<html>

Include jQuery and the jQuery.mhead .js and .css files in the HEAD of your webpage. If you want to use icons in your header, you might also want to include an icon font like Font Awesome.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mhead.js" type="text/javascript"></script>
   <link href="path/to/jquery.mhead.css" type="text/css" rel="stylesheet" />
   <link href="path/to/fontawesome.css" type="text/css" rel="stylesheet" />
</head>

You probably don't need to make any changes to the HTML of your webpage. But if you can, it is recommended to wrap all HTML in only one DIV. This is mostly important if you're also using the jQuery.mmenu plugin.

<body>
   <div id="my-page">
      <div id="my-header"></div>
      <div id="my-content"></div>
      <div id="my-footer"></div>
   </div>
</body>

This DIV is best off without a (min-/max-)width and (min-/max-)height, padding, border, margin, position, top, right, bottom, left or any other CSS value that changes its size and position.

Next up:
The header