Responsive menu for mobile devices with jQuery Plugin PageSlide
The following tutorial will focus on responsive HTML-menu for mobile devices and tablets. I would like to show how the jQuery-Plugin PageSlide works, based on a practical example. The underlying principle is to slide the menu layer over the content layer.
Here you can find a demo for this tutorial.
First we create a HTML page and include the JQuery plugins.
<!DOCTYPE html>
<html>
<head>
<title>Responsive menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/pageslide.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="js/pageslide.min.js"></script>
</body>
</html>
At first we adapt the CSS as the desktop first. Here you can see how it is done:
<!-- Beginn of main -->
<div class="main">
<!-- Beginn of header -->
<header class="header">
<!-- Beginn of nav -->
<nav id="nav">
<a href="#menu" id="menu-switcher"></a>
<ul id="menu">
<li><a href="#SilverStripe" title="SilverStripe">SilverStripe</a></li>
<li><a href="#JQuery" title="jQuery">jQuery</a></li>
<li><a href="#JQuery-Mobile" title="jQuery Mobile">jQuery Mobile</a></li>
<li><a href="#Wordpress" title="Wordpress">Wordpress</a></li>
<li><a href="#GitHub" title="GitHub">GitHub</a></li>
<li><a href="#Stackoverflow" title="stackoverflow">Stackoverflow</a></li>
<li><a href="#CakePHP" title="CakePHP">CakePHP</a></li>
</ul>
</nav>
<!-- End of nav -->
</header>
<!-- End of header ->
</div>
<!-- End of main ->
CSS
At first we adapt the CSS as the desktop first. Here you can see how it is done:
/* Basics */
{
margin:0;
padding:0;
}
body{
width: 100%;
height:100%;
color:#222;
font-size: 12px;
background:#d9d9d9;
font-family:arial,sans-serif;
}
a{
color:#fff;
font-weight: bold;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
#main{
width:100%;
height:auto;
}
/* Desktop & Tablets */
#main nav, #main #content{
width:600px;
height:auto;
padding:20px;
margin:20px auto;
}
#main nav{
height:20px;
border-radius: 10px;
background:-moz-linear-gradient(bottom,#333,#000); /* Firefox */
background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#333)); /* Chrome, Safari */
filter: progid:DXImageTransform.Microsoft.gradient(start Colorstr='#333', endColorstr='#000'); /* Internet Explorer */
}
#main #content{
min-height:400px;
}
#main #content a{
color:#222;
}
#main nav ul li{
float:left;
list-style: none;
padding:0 10px 0 10px;
border-right: 1px #d9d9d9 solid;
line-height: 15px;
}
#main nav ul li:last-child{
border-right: none
}
#main #menu-switcher{
display: none;
width: 40px;
height: 40px;
background: url('../img/menu.png') no-repeat;
position: relative;
top:-10px;
left:0;
border-radius: 6px;
}
Our menu for the desktop- and tablet-mode is now created.
In ordert to adjust our menu for mobile devices, we have to adjust our CSS,with the help of media queries, first. With media queries you can intercept the screen resolution and adjust CSS accordingly.
Add the following lines into the CSS file:
/* Smartphones */
@media (max-width:680px){
#main #menu-switcher{
display: block;
margin:0;
}
#main nav{
width:80%;
padding:10px;
background:#fff;
}
#main nav #menu{
display: none;
margin:0;
width:150px;
border-radius: 0;
}
#main #content{
width:90%;
border-radius: 10px;
margin-top:40px;
}
#pageslide #menu li{
list-style: none;
padding:10px;
border-right:0;
border-bottom: 1px #d9d9d9 solid;
line-height: 15px;
color: red;
}
}
Now we call up the index.html and try to minimize the browser window, so that the contents can be displayed for smartphones‘ mode. It is also possible to call up the index.html directly with the smartphone. As we will be able to see on the smartphone, the contents would be already adjusted but the switch menu would not be working yet.
At the end of the file, insert the following:
<script>
$("#menu-switcher").pageslide({ direction: "right"});
$("nav a").click(function(){
$.pageslide.close();
})
</script>
That would be the end of this tutorial. I hope that it was useful for you.
I am looking forward to receiving your feedback.
