The mobilemenu's intro from rdlh

mobilemenu's Introduction

# Slide&Push Mobile Menu (v2.0)

What is this ?

This javascript plugin is an Open-source and TouchFriendly Javascript mobile app menu

DEMO v2.0

DEMO v1.0

How it works ?

v2.0 is here ! This optimized and light version of MobileMenu is now really more stable and browser-friendly, moreover, the essential css is awesomely more easy too enderstand, modify, and integrate !

HTML :

<span class="right"></span>

<div class="slide-menu right-side">
    <div class="menuTop">
         <h2>Push Menu</h2><span></span>
    </div>
    <ul>
        <li class="active"><a href="#">Menu Link 001</a></li>
        <li><a href="#">Menu Link 002</a></li>
        <li><a href="#">Menu Link 003</a></li>
        <li><a href="#">Menu Link 004</a></li>
        <li><a href="#">Menu Link 005</a></li>
    </ul>
</div>

Javascript :

// FUNCTIONS

function OpenMenu(theTarget) {
    $('.page-wrap').toggleClass(theTarget);
}

function CloseMenu() {
    if ($('.page-wrap').hasClass('slide-left')) {
        $('.page-wrap').toggleClass('slide-left');
    } else if ($('.page-wrap').hasClass('slide-right')) {
        $('.page-wrap').toggleClass('slide-right');
    }
}

// EVENTS

$('.handle .right').click(function () {
    OpenMenu('slide-right');
});

$('.slide-menu .menuTop span, .content').click(function () {
    CloseMenu();
});

CSS :

.slide-menu {
    background: #333333;
    height: 100%;
    position: absolute;
}
.slide-menu.right-side {
    right:-220px;
    text-align: right;
}