Featured post

Mobile Sidebar

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