Touch Menu

Responsive, Scrollable Menu For Every Device.


Touch Menu is a jQuery Plugin for responsive menu which allows you to have infinite menu items since it is scrollable and doesnt need to collapse in smaller screens. It  is Cross-Browser and Works on Both iOS and Android.
Demo URL: http://redhawk-studio.com/demos/touch_menu/

Features:

  1. Touch Enabled.
  2. Scrollable.
  3. Responsive.
  4. iOS and Android Compatible.
  5. Customizable.
  6. Multiple Themes.
  7. Multiple Scrollbar Themes.
  8. Menu Doesnt Collapse On Smaller Devices.

 

The zip package you download has documentations, demos and source files included in it, you can use the demo html files as a reference to use the menu. 

1. You need to attach the source js and css files to your html:

<link rel="stylesheet" type="text/css" href="css/touch_menu.css">
<script type="text/javascript" src="js/touch_menu.js"></script>

 

2. Make the html markup for your menu:

<div class="red_menu">
  <div class="red_menu_inner">
   <ul>
   <li> <a href="#">HOME</a>
   <ul>
   <li> <a href="#">Support</a>
    <ul>
      <li> <a href="#">Support1</a> </li>
      <li> <a href="#">Support2</a> </li>
      <li> <a href="#">Support3</a> </li>
    </ul>
   </li>
<li> <a href="#">Help</a>
<ul>
<li> <a href="#">Help1</a> </li>
<li> <a href="#">Help2</a> </li>
<li> <a href="#">Help3</a> </li>
</ul>
</li>
<li> <a href="#">Example</a> </li>
<li> <a href="#">Demos</a></li>
<li> <a href="#">Portfolio</a></li>
<li> <a href="#">Sitemap</a></li>
<li> <a href="#">Works</a></li>
<li> <a href="#">History</a></li>
</ul>
</li>
<li> <a href="http://www.google.com">FEATURES</a> </li>
<li> <a href="#">PORTFOLIO</a> </li>
<li> <a href="#">ABOUT US</a>
<ul>
<li> <a href="#">Support2</a>
<ul>
<li> <a href="#">Support1</a> </li>
<li> <a href="#">Support2</a> </li>
<li> <a href="#">Support3</a> </li>
</ul>
</li>
<li> <a href="#">Help2</a>
<ul>
<li> <a href="#">Help1</a> </li>
<li> <a href="#">Help2</a> </li>
<li> <a href="#">Help3</a> </li>
</ul>
</li>
<li> <a href="#">Example</a> </li>
<li> <a href="#">Demos</a>
<ul>
<li> <a href="#">Demo1</a> </li>
<li> <a href="#">Demo2</a> </li>
<li> <a href="#">Demo3</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">CONTACT US</a> </li>
<li> <a href="#">MAP</a> </li>
<li> <a href="#">FIND US</a> </li>
<li> <a href="#">PORTFOLIO</a>
<ul>
<li> <a href="#">Support2</a> </li>
<li> <a href="#">Example</a> </li>
<li> <a href="#">Demos</a></li>
</ul>
</li>
</ul>
</div>
</div>

 

3. Initialize The Menu on your Outer div (red_menu).

<script type="text/javascript">
$(document).ready(function(){

$('.red_menu').TouchMenu({
                     menu_theme: 'red_menu_theme_chrome',
                     menu_top:5,
                     menu_height: 40,
                     scrollbar_theme: "dark-thin",
                     menu_shadow: true
                     });
});

</script>

And Thats all you need to make your Ordinary menu into responsive menu.

The API will be explained in the API section.

The jQuery plugins allows you to customize the following aspects of the plugin:

 

1. menu_theme

menu_theme allows you to use the themes included in the plugin, the possible values are: 

red_menu_theme_chrome

red_menu_theme_white

red_menu_theme_blue

red_menu_theme_green

red_menu_theme_light

red_menu_theme_neat

red_menu_theme_dark

You can also make you own themes by customizing the css included in the package.

 

2. scrollbar_theme

scrollbar_theme allows you to choose the scrollbar theme included in the plugin, it can be:

dark-thin

dark-thick

light-green

light-blue

light (default)

 

3. slide_speed

slide_speed allows you to adjust the sliding speed of the drop-down menu in phone mode. The default value is 500 (ms).

 

4. menu_shadow

menu_shadow allows you to hide or show shadow under the menu, the default value is true (shadow is visible).

 

5. menu_height

menu_height allows you to set the height of the menu bar. The default value is 45 (px). This can be used to adjust the position of scrollbar under the menu.

 

6. menu_top

menu_top allows you to set the position of the sub-menu under menu-bar in px. The default value is 2 (px). Larger values will push the sub-menu down.

 

In a nutshell:

API

Chrome:

Chrome

 

Cloud:

Cloud

Dark:

 

Green:

 

Neat:

 

White:

White

jQuery custom content scroller is used in this plugin, which is free to modify or use commercially:

You are free to use, study, improve and modify this script wherever and however you like.

All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License

Source: http://manos.malihu.gr/jquery-custom-content-scroller/