Попытка перемещения расширяющейся навигационной панели с правой стороны на левую сторону

Question

Это код HTML для расширяющейся навигационной панели, это из шаблона, который я редактирую, я смог переместить панель меню навигации влево и когда я нажимаю на него, он расширяется с правой стороны, которую я пытаюсь исправить, и перемещаю его, чтобы развернуть с левой стороны.

<div class="jumbotron home home-fullscreen" id="home"> 
    <div class="mask"></div> 

<a href="" class="menu-toggle" id="nav-expander"><i class="fa fa-bars"> 
</i></a> 
    <!-- Offsite navigation --> 
    <nav class="menu"> 
     <a href="#" class="close"><i class="fa fa-close"></i></a> 
     <h3> <a href="index.html"> spacecurb </a> </h3> 
     <ul class="nav"> 
      <li><a data-scroll href="#home">Apartment</a></li> 
      <li><a data-scroll href="#services">Hostel</a></li> 
      <li><a data-scroll href="#portfolio">Room Rent</a></li> 
      <li><a data-scroll href="#contact">Work Spaces</a></li> 
      <li><a data-scroll href="#contact">hotels</a></li> 
      <li><a data-scroll href="#contact">sign up</a></li> 
      <li><a data-scroll href="#contact">log in</a></li> 
      <li><a data-scroll href="#contact">about</a></li> 
      <li><a data-scroll href="#contact">contact</a></li> 
      <li><a data-scroll href="#contact">help</a></li> 
      <li><a data-scroll href="#contact">add property</a></li> 
     </ul> 
     <ul class="social-icons"> 
      <li><a href=""><i class="fa fa-facebook"></i></a></li> 
      <li><a href=""><i class="fa fa-twitter"></i></a></li> 
     </ul> 
    </nav> 

и это код CSS, я был в состоянии двигаться расширяющуюся навигационной панели слева, но он расширяется в правой

.menu-toggle{ 
position: absolute; 
left: 15px; 
top: 15px; 
font-size: 30px; 
color: #fff; 
} 

.menu{ 
width: 300px; 
display: block; 
background: #333; 
height: 100%; 
top: 0; 
right:-300px; 
position: fixed; 
z-index: 100; 
text-align: center; 
transition: right 0.4s; 
} 

.menu.nav-expanded{ 
right: 0; 
} 

.menu .close{ 
color: #fff; 
margin-right: 10px; 
margin-top:10px; 
} 

Answer 1

Вы

.menu{ 
    width: 300px; 
    right: -300px; 
} 

.menu.nav-expanded{ 
    right: 0; 
} 

It означает, что ваше меню вне экрана (справа), и когда оно расширяется, оно попадает на страницу в позиции right:0.

Теперь, если вы хотите перейти на левую сторону в режиме расширения, удалить right:0 и установить:

.menu.nav-expanded{ 
    left: 0; 
} 

Чтобы закрыть меню, нажав на обычном экране добавить этот блок JQuery скрипт:

<script> 

    $(document).ready(function() 
    { 
     $(document).click(function (e) 
     { 
      if (!$(e.target).hasClass('menu-toggle') && !$(e.target).closest('.menu').hasClass('menu')) 
       $('.menu').removeClass('nav-expanded'); 
     }); 
    }); 
</script>