jquery menü onclick minus width von nav

Question

wie bekomme ich die minus navWidth arbeit ?!

hier ist mein jquery Skript

$(document).ready(function() { 

    //------------------menu----------- 

    var navWidth = $("nav").css("width"); 

    $("#menu_btn").click(function() { 
     $(".primary").css({ 
      "right": "0px", 
     }) 
     $(".lightbox").show(); 
    }); 

    $("#menu_close_btn").click(function() { 
     $(".primary").css({ 
      "right": -navWidth + "px", 
     }) 
     $(".lightbox").hide() 
    }); 

    $(".lightbox").click(function() { 
     $(".primary").css({ 
      "right": -navWidth + "px", 
     }) 
     $(this).hide(); 
    }); 

    $("nav ul li a").click(function() { 
     $(".primary").css({ 
      "right": -navWidth + "px", 
     }) 
    }) 

    $('a[href^="#"]').click(function() { 

     $('html,body').animate({ 
      scrollTop: $(this.hash).offset().top 
     }, 300); 

     return false; 

     e.preventDefault(); 

    }); 

    //------------------end menu----------- 


    }); 

hier mein html ist:

<section class="header" id="header"> 
     <header> 
      <i class="fa fa-bars" id="menu_btn" aria-hidden="true"></i> 
     </header> 

     <nav class="primary"> 
      <i class="fa fa-times" id="menu_close_btn" aria-hidden="true"></i> 
      <ul> 
       <li><a href="#header">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#my_work">My Work</a></li> 
      </ul> 
     </nav> 

hier ist mein CSS:

header #menu_btn { 
     font-size: 35px; 
    margin: 0px 2%; 
    line-height: 45px; 
    } 

nav { 
    position: fixed; 
    height: 100vh; 
    width: 350px; 
    right: -350px; 
    top: 0; 
    z-index: 150; 
    background-color: #383838; 
    transition: all 0.5s; 
} 

nav i { 
    position: absolute; 
    top: 3%; 
    right: 7%; 
    color: white; 
} 

nav ul { 
    position: relative; 
    float: left; 
    top: 50%; 
    left: 50%; 
    transform: translate(-104.9%, -50%); 
    list-style-type: none; 
    text-align: left; 
    line-height: 55px; 
} 

nav ul l i {} 

nav ul li a { 
    font-size: 16px; 
    color: #c4c4c4; 
    text-decoration: none; 
} 

nav ul li a:hover { 
    color: #fff; 
} 

sdasodhusandjisadiandjskakjdnasjkdnasjkdnjaksndjksandjkankjsdnasjkdjkadsanjdkas ndjksandjksandkjsa ncsjand jksandjk ndjkasn dkjsanjk ndjkasn KDSA

Answer 1

I geändert:

"right": -$("nav").width() + "px", 

$(document).ready(function() { 
 

 
    //------------------menu----------- 
 

 
    $("#menu_btn").click(function() { 
 
     $(".primary").css({ 
 
      "right": "0px", 
 
     }) 
 
     $(".lightbox").show(); 
 
    }); 
 

 
    $("#menu_close_btn").click(function() { 
 
     $(".primary").css({ 
 
      "right": -$("nav").width() + "px", 
 
     }) 
 
     $(".lightbox").hide() 
 
    }); 
 

 
    $(".lightbox").click(function() { 
 
     $(".primary").css({ 
 
      "right": -navWidth + "px", 
 
     }) 
 
     $(this).hide(); 
 
    }); 
 

 
    $("nav ul li a").click(function() { 
 
     $(".primary").css({ 
 
      "right": -navWidth + "px", 
 
     }) 
 
    }) 
 

 
    $('a[href^="#"]').click(function() { 
 

 
     $('html,body').animate({ 
 
      scrollTop: $(this.hash).offset().top 
 
     }, 300); 
 

 
     return false; 
 

 
     e.preventDefault(); 
 

 
    }); 
 

 
    //------------------end menu----------- 
 

 

 
    });

header #menu_btn { 
 
     font-size: 35px; 
 
    margin: 0px 2%; 
 
    line-height: 45px; 
 
    } 
 

 
nav { 
 
    position: fixed; 
 
    height: 100vh; 
 
    width: 350px; 
 
    right: -350px; 
 
    top: 0; 
 
    z-index: 150; 
 
    background-color: #383838; 
 
    transition: all 0.5s; 
 
} 
 

 
nav i { 
 
    position: absolute; 
 
    top: 3%; 
 
    right: 7%; 
 
    color: white; 
 
} 
 

 
nav ul { 
 
    position: relative; 
 
    float: left; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-104.9%, -50%); 
 
    list-style-type: none; 
 
    text-align: left; 
 
    line-height: 55px; 
 
} 
 

 
nav ul l i {} 
 

 
nav ul li a { 
 
    font-size: 16px; 
 
    color: #c4c4c4; 
 
    text-decoration: none; 
 
} 
 

 
nav ul li a:hover { 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
 
<section class="header" id="header"> 
 
     <header> 
 
      <i class="fa fa-bars" id="menu_btn" aria-hidden="true"></i> 
 
     </header> 
 

 
     <nav class="primary"> 
 
      <i class="fa fa-times" id="menu_close_btn" aria-hidden="true"></i> 
 
      <ul> 
 
       <li><a href="#header">Home</a></li> 
 
       <li><a href="#about">About</a></li> 
 
       <li><a href="#my_work">My Work</a></li> 
 
      </ul> 
 
     </nav> 
 
</section>