Here is example to make mobile friendly responsive sidebar menu with icons using jQuery
File structure
Jquery-sidebar/
┣ icons/
┃ ┣ ic_format_align_left_black_24dp_1x.png
┃ ┣ ic_format_align_left_black_24dp_2x.png
┃ ┣ ic_format_align_right_black_24dp_1x.png
┃ ┗ ic_format_align_right_black_24dp_2x.png
┗ index.php
index.php
<!DOCTYPE html>
<html>
<head>
<title>Sidebar tutorial</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{
background: #ccc;
margin: 0;
padding: 0;
}
body a{
font-family: 'Roboto', sans-serif;
}
main{
width: 100%;
margin: 0px auto;
}
main section#sidebar{
width: 30%;
position: fixed;
top: 0;
left: 0;
transition: 0.3s;
background: #fff;
height: 100%;
padding: 20px;
box-sizing: border-box;
border-right: 1px solid #fff;
overflow-y: auto;
overflow-x: hidden;
}
main section#main-container{
position: absolute;
width: 70%;
top: 0px;
left: 30%;
transition: 0.3s;
box-sizing: border-box;
border-right: 1px solid #fff;
}
#sidebar ul li{
list-style-type: none;
}
#sidebar ul li .fa{
display: block;
margin-top: 25px;
padding: 5px;
}
#sidebar ul li a{
font-size: 17px;
color: #666666;
text-decoration: none;
}
header{
position: fixed;
width: 100%;
}
header nav{
background: #bef5b6;
padding: 10px;
position: relative;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
list-style-type: none;
}
nav ul li a{
text-decoration: none;
color: #333333;
font-size: 17px;
}
nav ul:last-child{
position: absolute;
top: 12px;
z-index: 200;
right: 32%;
}
nav ul:last-child li{
margin-left: 10px;
}
nav ul:last-child li a{
margin-left: 5px;
text-decoration: none;
}
main.main #sidebar{width: 5%; transition: 0.3s;}
main.main #sidebar ul{
margin-top: 40px;
padding: 0;
}
main.main #sidebar h2{
display: none;
}
main.main #main-container{
width: 95%; left: 5%;transition: 0.3s;
}
main.main nav ul:last-child{
right: 7%;
}
</style>
<script>
$(document).ready(function () {
$('#lign-icon').on("click", function () {
if ($('main').hasClass('main')) {
$('main').removeClass("main");
$('#sidebar').find("span").show(50);
$(this).html(' <img src="icons/ic_format_align_left_black_24dp_1x.png">');
} else {
$('main').addClass("main");
$('#sidebar .fa').addClass("fa-lg");
$('#sidebar').find("span").hide();
$(this).html(' <img src="icons/ic_format_align_right_black_24dp_1x.png">');
}
});
});
</script>
</head>
<body>
<main>
<section id="sidebar">
<h2>Shop Now</h2>
<ul>
<li><a href="#" class="fa fa-gift"><span> All offers</span></a></li>
<li><a href="#" class="fa fa-video-camera"><span> Cameras</span></a></li>
<li><a href="#" class="fa fa-desktop"><span> Computers</span></a></li>
<li><a href="#" class="fa fa-female"><span> Women's fashion</span></a></li>
<li><a href="#" class="fa fa-male"><span> Man's fashion</span></a></li>
</ul>
</section>
<section id="main-container">
<header>
<nav>
<ul class="nav-left">
<li>
<a href="#" id="lign-icon">
<img src="icons/ic_format_align_left_black_24dp_1x.png">
</a>
</li>
</ul>
<ul>
<li class="fa fa-sign-in"><a href="#">Login</a></li>
<li class="fa fa-user-plus"><a href="#">Signup</a></li>
</ul>
</nav>
</header>
<div style="width: 100%;height: auto;">;
<img src="ben-white-181034.jpg" alt="My Image" style="width: 100%;height: auto;">
</div>
<div style="height: 1500px;"></div>
</section>
</main>
</body>
</html>
Output:
Download source code
Are you facing problems in understanding this article? download source code now