mobile headers introduction

Beautiful mobile headers, with ease

Create a beautiful, eye-catching navigation header for mobile websites and web-apps, completely in style and fully compatible with the jQuery.mmenu navigation menu.


As easy as it gets

A mobile navigation header might not be all that hard to create, but with the jQuery.mhead plugin you'll be able to do them exactly right, with very little effort. Just have a look at the examples below.

Animated headers

The jQuery.mhead plugin keeps the navigation header in view for the user when appropriate, while saving space and focus for your content the rest of the time.

examples

Download

The jQuery.mhead plugin is licensed under the Creative Commons Attribution 4.0 International license. You can use it in all your personal, non-commercial and commercial projects.


CDN

Hopefully coming soon

NPM

Install the plugin with NPM:
npm install jquery.mhead

GitHub

Download directly from the Github repository.

How to use

Here's a basic HTML example for a header showing a title and a hamburger icon.

<div id="my-header" class="mh-head Sticky">
   <span class="mh-btns-left">
      <a class="fa fa-bars" href="#my-menu"></a>
   </span>
   <span class="mh-text">demo</span>
</div>

Check out this tutorial for more detailed information on how to use the jQuery.mhead plugin.

About the HTML

You can basically add any HTML inside a <div class="mh-header" />, but a lot of commonly used content hass already been made available. Here's a complete overview of all available classnames.

The header
.mh-head
The header itself.
.mh-size-2/3
Enlarges the header two or three times.
.mh-align-left/right
Aligns the text (.mh-text) or logo (.mh-logo) to the left or right.
Buttons
.mh-btns-left/right
A wrapper for a single button on the left or right.
.mh-btns-2/3-left/right
A wrapper for two or three buttons on the left or right.
.mh-hamburger
This button will be transformed into a functional animated hamburger icon.
Content
.mh-text
The header text.
.mh-list
A scrollable list of anchors.
.mh-form
A searchfield with submit button.
.mh-logo
An image fitted in the available space.
.mh-image
An image filling up the available space.

Options

The jQuery.mhead plugin provides a set of options for customizing your header. The default values can be overridden by passing new values to the method.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-header").mhead({
         // options
      });
   });
</script>

Available options

Option Default value Datatype Description
1 See the description.
scroll A map of options or false for scroll.hide (and scroll.show).
{
hide 0 Number Amount of pixels to scroll down before hiding the header.
show 0 Number Amount of pixels to scroll up before showing the header.
tolerance 4 Number Minimum amount of pixels to scroll per scroll-event before showing or hiding the header.
}
hamburger
{
menu null 1 String jQuery selector for the menu that should be opened when clicking the hamburger icon. If omitted, the plugin will use the anchor href attribute or target the first mmenu menu that it finds.
animation "collapse" String The animation to use.
}