HTML:
<div class="sidenav">
<ul class="list">
<li><a href="#" class="closenav"><i class="fa fa-close"></i> Close</a></li>
<li><a href="#">New Car</a></li>
<li><a href="#">Used Car</a></li>
<li><a href="#">Compare</a></li>
<li><a href="#">Insuarance</a></li>
<li><a href="#">Get On Road Prize</a></li>
<li><a href="#">Used Car</a></li>
<li><a href="#">Compare</a></li>
<li><a href="#">Insuarance</a></li>
<li class="dropdown">
<a href="#" style="text-decoration: none" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-animations="fadeinup fadeinup fadeinup fadeindown">my account
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">city : ahmedabad</a>
</li>
<li><a href="#">login</a>
</li>
</ul>
</li>
</ul>
</div>
<span class="opennav"><i class="fa fa-bars"></i></span>
css:
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top:15px;
text-align:center;
}
.opennav{
font-size: 27px;
color: #fff;
background: #00a6e6;
cursor: pointer;
margin-top: 55px;
display: block;
width: 40px;
text-align: center;
}
.sidenav a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size:15px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover{
color:#00A6E6;
}
.sidenav .closenav {
font-size: 22px;
}
.dropdown-menu{
width: 100%;
border-radius: 0;
max-width: 100%;
text-align: center;
}
js:
$(document).on('click', '.opennav', function () {
var ans = $(window).width();
$(".sidenav").css("width", ans );
});
$(document).on('click', '.closenav', function () {
var ans = 0;
$(".sidenav").css("width", ans );
});
Comments
Post a Comment