Responsive Mobile Menu

The easiest way to implement user-friendly responsive navigation optimized for mobile devices using HTML5, CSS3 and jQuery
rmm-intro-img
 

Main features

  • Surprisingly easy markup and installation
  • Light-weight code
  • Multiple menus on the same page supported
  • Customizable menu title
  • 100% functionality in all modern mobiles/smartphones and desktop web browsers
  • No CSS media queries used, only javascript-coded toggling
  • Multiple menu styles available
  • Free, Open-Source code, licensed under CC BY 3.0

What´s new in v.1.1 ?

  • Customizable menu title
  • Fixed unexpected menu toggling in IOS Safari Browser

How-to install menu

Download the latest version of Responsive Mobile Menu (current version 1.1)

 

Unzip the archive:

rmm-css responsivemobilemenu.css // stylesheet rmm-js responsivemobilemenu.js // javascript rmm-img // images folder graphite-menu-bg.png orange-menu-bg.png sapphire-menu-bg.png demo.html // Responsive Mobile Menu Demo

Link the files ( stylesheet, jQuery library and JavaScript  make all magic):

<link rel="stylesheet" href="rmm-css/responsivemobilemenu.css" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="rmm-js/responsivemobilemenu.js"></script>

The complete code should be like this one which works like a charm:

<div class="rmm">
        <ul>
            <li><a href='#home'>Home</a></li>
            <li><a href='#about-me'>About me</a></li>
            <li><a href='#gallery'>Gallery</a></li>
            <li><a href='#blog'>Blog</a></li>
            <li><a href='#links'>Links</a></li>
            <li><a href='#sitemap'>Sitemap</a></li> 
       </ul>
</div>

The complete code should be like these one which works like a charm:

<!DOCTYPE html>
<html>
<head>
<title>Responsive Mobile Menu</title>
<link rel="stylesheet" href="rmm-css/responsivemobilemenu.css" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="rmm-js/responsivemobilemenu.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<body>
        <div class="rmm">
            <ul>
                <li><a href='#home'>Home</a></li>
                <li><a href='#about-me'>About me</a></li>
                <li><a href='#gallery'>Gallery</a></li>
                <li><a href='#blog'>Blog</a></li>
                <li><a href='#links'>Links</a></li>
                <li><a href='#sitemap'>Sitemap</a></li> 
            </ul>
        </div>
</body>
</html>

Please make sure that all parent containers handle "rmm" class container have floating width, not the static one, and the viewport is set up to "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

 

The final step is to customize your Responsive Mobile Menu by choosing one of the available styles

How-to customize menu

The only thing you have to do is specify the value for an attribute data-menu-style for menu container from the list of available menu styles

<div class='rmm' data-menu-style = "graphite">
    <ul>
        <li><a href='#home'>Home</a></li>
        <li><a href='#about-me'>About me</a></li>
        <li><a href='#blog'>Blog</a></li>
        <li><a href='#links'>Links</a></li>
        <li><a href='#sitemap'>Sitemap</a></li>    
    </ul>
</div>

Change mobile menu title (version 1.1 and later)

You can specify the value for an attribute data-menu-title for change the title of toggled menu

<div class='rmm' data-menu-title = "My menu title">
    <ul>
        <li><a href='#home'>Home</a></li>
        <li><a href='#about-me'>About me</a></li>
        <li><a href='#blog'>Blog</a></li>
        <li><a href='#links'>Links</a></li>
        <li><a href='#sitemap'>Sitemap</a></li>    
    </ul>
</div>

View demo

Available menu styles

Whats next ?

  • Debugging and optimization fixes
  • Sub-level menus and drop-downs
  • Make the plugin independent of jQuery library
  • More menu styles and skins
  • Create a plugin for Wordpress CMS

Any comments ?