Drop Down Menu Main Features

The easiest way to implement user friendly responsive drop down menu optimized for mobile devices using HTML5, CSS3 and jQuery.  Drop Down Menu is Surprisingly easy markup and installation. Drop down menu is Free, Open-Source code.


You May Also Like:


Main features of Responsive Drop Down Menu

  • 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
  • Drop down menu is Free, Open-Source code
  • Drop Down Menu is Surprisingly easy installation.

What´s new in v.1.1 ?

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

How-to install drop down menu

  • Download the latest version of Responsive Mobile Menu (current version 1.1)
  • Unzip the folder named v1.
  • In folder responsivemobilemenu there are three folders.
  • In folder rmm-css has one file named responsivemobilemenu.css
  • In folder stylesheet rmm-js has one file named responsivemobilemenu.js
  • In folder javascript rmm-img has three images
  • graphite-menu-bg.png
  • orange-menu-bg.png
  • sapphire-menu-bg.png
  • demo.html show Responsive Mobile Menu Demo

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

<linkrel="stylesheet"href="rmm-css/responsivemobilemenu.css"type="text/css"/>

<scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script>

<scripttype="text/javascript"src="rmm-js/responsivemobilemenu.js"></script>

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>

Download

About The Author

Related Posts

Leave a Reply

Your email address will not be published.