Der Versuch, den Ausbau navbar von der rechten Seite auf die linke Seite zu bewegen

Question

Dies wird der HTML-Code für die expandierende Navigationsleiste, es aus einer Vorlage, die ich bin der Bearbeitung, konnte ich das nav-Menüleiste auf der linken Seite bewegen und wenn ich darauf klicke, wird es auf der rechten Seite erweitert, die ich versuche zu fixieren und verschiebe es, um es auf der linken Seite zu erweitern.

<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> 

und dies ist der CSS-Code, konnte ich die expandierende Navigationsleiste auf der linken Seite bewegen, aber es dehnt sich auf der rechten Seite

.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

Sie haben

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

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

Es aus dem Bildschirm (rechts) bedeutet, dass Ihr Menü ist, und wenn es sich Seite an Position right:0 erweitert werden.

Nun, wenn Sie wollen, dass es nach links geht in Betrieb erweitern, entfernen right:0 und setzte:

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

Zum Menü schließen, indem Sie auf dem normalen Bildschirm Anklicken diesen jquery Skriptblock hinzu:

<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>