Is there a way to have the menu slide in smoothly from the right side after clicking on the menu bar icon, including sliding the menu bar icon itself? The current code displays the menu directly upon clicking on the menu bar, but I would like it to slide in smoothly. This functionality needs to work on mobile devices. Can anyone assist me with this?
$(function() {
var menuVisible = false;
$('#menuBtn').click(function() {
if (menuVisible) {
$('#myMenu').css({
'display': 'none'
});
menuVisible = false;
return;
}
$('#myMenu').css({
'display': 'block'
});
menuVisible = true;
});
$('#myMenu').click(function() {
$(this).css({
'display': 'none'
});
menuVisible = false;
});
});body {
margin: 0;
padding: 0;
height: 100%;
}
.menu ul {
list-style: none;
float: right;
}
.menu li {
float: left;
margin: 10px;
}
.menu li a {
text-decoration: none;
color: #333;
text-transform: uppercase;
}
.menu-bar {
display: none;
}
@media only screen and (max-width: 768px) {
.menu-bar {
display: block;
float: right;
cursor: pointer;
margin: 10px;
}
#myMenu {
display: none;
z-index: 999;
}
.menu ul {
background-color: red;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
padding: 0px;
-webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
}
.menu ul li {
float: none;
border-bottom: 1px solid #fff;
width: 100%;
margin: 20px;
text-align: left;
}
.menu li a {
padding: 20px;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="menu">
<div class="menu-bar">
<span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span>
</div>
<ul id="myMenu">
<li><a href="">home</a>
</li>
<li><a href="">about</a>
</li>
<li><a href="">service</a>
</li>
<li><a href="">contact</a>
</li>
</ul>
</div>
<div style="position: relative;top: 50px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut neque dignissim, lobortis nulla sed, tristique urna. Pellentesque placerat, nunc eu feugiat tincidunt, lacus turpis dictum elit, non viverra elit metus at purus. Morbi eleifend
dui velit, sit amet pretium odio lacinia eget. Nullam mattis massa in nibh laoreet euismod. Phasellus ullamcorper elit quis neque fermentum, at vehicula dolor posuere. Quisque gravida arcu a metus dignissim, vitae convallis ipsum vestibulum. Aliquam
mollis magna non velit convallis, ut eleifend mauris pharetra. Phasellus ac ipsum pulvinar, dignissim lacus ut, dapibus purus. Integer volutpat ullamcorper magna quis vehicula. Maecenas rhoncus, turpis ac aliquam hendrerit, purus velit pellentesque
tellus, vitae scelerisque metus leo vestibulum leo. Duis ac vulputate tortor. Aliquam at diam ullamcorper, finibus purus ac, dictum sem. Nulla quis dignissim orci. Donec vel purus eget elit feugiat auctor eget eget odio. Praesent volutpat purus in
dui aliquam dignissim. Curabitur bibendum lorem id rutrum congue. Nulla urna diam, malesuada ac nibh consequat, auctor egestas ipsum. In non ipsum augue. Maecenas at velit tempus, pellentesque dui non, volutpat tellus. Duis ullamcorper lorem vel blandit
scelerisque. Etiam venenatis est non urna volutpat, nec commodo neque condimentum. Maecenas sed tortor lacinia, viverra ligula vel, maximus ex. Aenean ut vestibulum lectus. Donec l</p>
</div>