Code for sliding menu effects on sidebar using jQuery Mobile

It has been several years since jQuery was used. From the first 1.4 to the current 2.1, it is more convenient to use. jQuery has a Mobile development plug-in, that is, jQuery Mobile, I have never used this plug-in. I am so interested today that I am trying to create a sidebar sliding menu. The effect is good. I will share it with you now.

Preparations

To add the jquery.min.jsand jquery.mobile.min.js files to our webpage, add them to the jquery.mobile.min.css file.

<Link rel = "stylesheet" href = "css/jquery.mobile-1.0rc2.min.css"/>
<Script type = "text/javascript" src = "js/jquery-1.6.4.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. Mobile-1.0rc2.min.js"> </script>

HTML code

We first add the HTML code of the menu, which is not displayed on the page by default.
<Div id = "menu" style = "display: none;">
<H3> Menu <Ul>
<Li class = "active"> <a href = "# home" class = "contentLink"> Home </a> </li>
<Li> <a href = "# home" class = "contentLink"> About </a> </li>
<Li> <a href = "# home" class = "contentLink"> Portfolio </a> </li>
<Li> <a href = "# home" class = "contentLink"> Contact </a> </li>
</Ul>
</Div>

To compile the HTML of the content, we need a button to display the menu.

<Div data-role = "page" class = "pages" id = "home">
<Div data-role = "header">
<A href = "#" class = "showMenu"> Menu </a>
<H1> FB Style Menu </Div> <! --/Header -->
<Div data-role = "content">
<P> <strong> Note: You can swipe right/left to show/close menu. </strong> </p>
</Div> <! --/Content -->
</Div> <! --/Page -->

CSS code

Body {
-Webkit-text-size-adjust: none;
Background: #5a5959 url (../images/menuBg.gif) top left repeat-y;
}
. Pages h3 {
Font-size: 20px;
Margin: 0;
}
# Menu {
Background-color: #5a5959;
Float: left;
Height: 100%;
Width: 165px;
}
# Menu h3 {
Font-family: arial;
Font-size: 12px;
Color: # fff;
Margin: 0;
Padding: 4px 0 4px 10px;
Background:-webkit-gradient (linear, left top, left bottom, color-stop (5%, rgba (90,89, 89,1), color-stop (85%, rgba (66,65, )));
Border-top: solid # 6b6b6b 1px;
Border-bottom: solid # 3d3d3d 1px;
Text-shadow: 0-1px 1px #333;
}
# Menu ul {
Margin: 0;
Padding: 0;
Width: inherit;
}
# Menu ul li a: link,
# Menu ul li a: visited {
Border-bottom: solid #333 1px;
Box-shadow: 0 1px 0 #727272;
Color: # fff;
Display: block;
Font-family: arial;
Font-size: 14px;
Padding: 10px 0 10px 10px;
Text-decoration: none;
Text-shadow: 0 1px 1px #000;
Width: 165px;
}
# Menu ul li a: hover,
# Menu ul li a: active {
Background-color: # 716f6f;
}
. Ui-body-c {
Background-color: # fff;
Line-height: 18px;
}
. Active {
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, rgba (30,29, 29,1), color-stop (21%, rgba (56,55, 55,1 )));
Color: # fff;
Text-shadow: 0 1px 1px #000;
}

JavaScript code

$ (Document). bind ("mobileinit", function (){
$. Mobile. pushStateEnabled = true;
});
$ (Function (){
Var menuStatus;
Var show = function (){
If (menuStatus ){
Return;
        }
$ ('# Menu'). show ();
$. Mobile. activePage. animate ({
MarginLeft: "165px ",
},300, function (){
MenuStatus = true
});
};
Var hide = function (){
If (! MenuStatus ){
Return;
        }
$. Mobile. activePage. animate ({
MarginLeft: "0px ",
},300, function (){
MenuStatus = false
$ ('# Menu'). hide ();
});
};
Var toggle = function (){
If (! MenuStatus ){
Show ();
} Else {
Hide ();
        }
Return false;
};
// Show/hide the menu
$ ("A. showMenu"). click (toggle );
$ ('# Menu,. pages'). live ("swipeleft", hide );
$ ('. Pages'). live ("swiperight", show );
$ ('Div [data-role = "page"] '). live ('pagebeforeshow', function (event, ui ){
MenuStatus = false;
$ (". Pages" ).css ("margin-left", "0 ");
});
// Menu behaviour
$ ("# Menu li a"). click (function (){
Var p = $ (this). parent ();
P. siblings (). removeClass ('active ');
P. addClass ('active ');
});
});

All right, the above is all the code for this effect.