Skip to content
Illustration – jQuery.mmenu gets centered with whole page in widescreen

jQuery.mmenu: How to center an off-canvas navigation in widescreen view

jQuery.mmenu includes a widescreen extension which makes it possible to permanently show the navigation at a defined viewport width. Here I'll show you how you can easily center the navigation along with the website.

Demo

What is jQuery.mmenu?

It's a highly customizable jQuery plugin for website navigation. A decisive feature are the sliding submenus. By default the plugin generates an Off-canvas menu which is hidden from sight until the user pushes the menu button: then the page content slides out of view to reveal the navigation. This principle was popularized by the Facebook App.

How does it work?

jQuery.mmenu depends on jQuery. No, seriously. When installed, the supplied jQuery.mmenu JavaScript sets the required classes and also prepends the menu to the <body> tag, no matter where we wrote it in our source code.

The plugin offers an API to configure the menu to our needs. I won't get into details here as the official documentation is well maintained. Basically, options and configurations are organized in two code blocks. This is an advanced example:

$(document).ready(function() {
  $('#menu').mmenu({
    // options
    extensions: [ 'effect-slide-menu', 'pageshadow' ],
    searchfield: true,
    counters: true,
    navbar: {
      title: 'Advanced menu'
    },
    navbars: [
      {
        position: 'top',
        content: [ 'searchfield' ]
      }, {
        position: 'top',
        content: [
          'prev',
          'title',
          'close'
        ]
      }
    ]
  }, {
    // configuration
    clone: true,
    classNames: {
      selected: 'active',
      vertical: 'Vertical'
    }
  });
});

The actual tutorial: centering website and navigation

First we download the jQuery.mmenu plugin from the official website. The .zip file contains an default.html in the 'demo' directory. You can either use this as a starting point or alter your existing template.

Furthermore we'll need the following files which must be included inside the <head>:

  • /demo/css/demo.css
  • /dist/css/jquery.mmenu.all.css
  • /dist/extensions/widescreen/ jquery.mmenu.widescreen.css
    (include this with a Media Query set to your chosen widescreen width!)
  • eine jQuery-Version ab 1.7.2
  • /dist/js/jquery.mmenu.all.min.js

HTML structure

As mentioned, the navigation gets prepended to <body> by jquery.mmenu.all.min.js. In the next step we will change that, but first of all we'll arrange our desired structure: the whole page gets a wrapper which contains both navigation and page content. Let's assume here we want the menu to be on the left. Other layouts are possible, though.

<div class="wrapper">
  <nav id="menu">
    <ul>
      <li><a href="#">page</a></li>
      <li><a href="#">page</a>
        <ul>
          <li><a href="#">page</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <div class="page">
    <div class="header">
      <a class="toggle-icon" href="#menu"></a>
    </div>
    <div class="content">
    </div>
  </div>
</div>

JavaScript

Now we configure our navigation. This is a basic example, more features could be added. Inside offCanvas: {} we change to default options:

  • menuWrapperSelector: the DOM node the menu should be injected in
  • pageSelector: the DOM node the menu considers as the page
<script type="text/javascript">
  $(document).ready(function() {
    $('#menu').mmenu({
      // options
      extensions: [ 'effect-slide-menu', 'pageshadow', 'widescreen' ]
    }, {
      // configuration
      offCanvas: {
        menuWrapperSelector: '.wrapper',
        pageSelector: '.page'
      }
    });
   });
</script>

That way the navigation stays inside our wrapper and the plugin uses .page as the DOM object which will slide out of view.

CSS

Finally we specify some basic CSS declarations:

  • we set a max-width to the .wrapper and center it
  • the .page object gets a height of 100vh, so the background-color will always be on full height
  • html.mm-background .mm-page is a declaration of the plugin which we override with the page's background-color
  • a media query is used to change the position of the navigation and hide the - then useless - menu icon when in widescreen view
body {
  background-color: #444;
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.page {
  background-color: #fff;
  height: 100vh;
}
html.mm-background .mm-page {
  /* default is 'inherit' */
  background-color: #fff;
}
@media (min-width: 900px) {
  #menu {
    position: absolute;
  }
  .header .toggle-icon {
    /* don't show menu icon in widescreen */
    display: none;
  }
}

Now the desired effect should be achieved. From this point on, you can add further features to the navigation.

Troubleshooting

Why is my navigation always visible, even in small viewports?

Most probably you didn't include the widescreen css with a media query. This is crucial to limit it to a certain width. Try this:

<link type="text/css" rel="stylesheet" href="Css/jquery.mmenu.widescreen.css" media="all and (min-width: 900px)">

or include jquery.mmenu.widescreen.scss with a media query in your Sass files.

I added offCanvas: {} to my JavaScript configuration. Now the whole menu is missing!

The API consists of two parts: first is for the options, second for the configurations (see above). Please check if you correctly inserted it in the second part. Perhaps you just have a syntax error due to wrong set braces. Compare your configurations with the demo's quell code.

Besides, the jQuery.mmenu plugin provides no ready-made fallback when JavaScript is disabled. You're free to add this yourself the way you prefer it.

Back