Телефон не работает правильно

Question

Я использую простой переключатель для открытия и закрытия моей мобильной навигации. Когда нагрузка на навигацию загружается, ширина телефона и показать навигацию, когда она должна быть скрыта, заставляя страницу загружаться шире ширины. Кроме того, я не могу заставить Nav Menu оставаться на странице, поэтому, когда он снова будет нажат, он закроется.

Вот что у меня есть, и я не уверен, почему навигатор показывает, что он не был нажат.

#nav-ph { 
    position: absolute; 
    top: 100px; 
    right: 0px; 
    margin: 0px; 
    padding: 5px 0; 
    list-style: none; 
    z-index: 9999; 
    width: 100%; 
} 
.nav-btn-ph { 
    position: absolute; 
    top: -2px; 
    left: -40px; 
    width: 40px; 
    height: 35px; 
    display: block; 
    cursor: pointer; 
} 
.nav-btn-ph img { 
    margin: 20px 0px 0px 13px; 
} 
.main-nav-ph li { 
    padding:0 10px; 
    text-align: left; 
    text-decoration: none; 
    color: #FFF; 
    font-family: @m; 
    font-size: 24px; 
} 
.main-nav-ph li a { 
    color: #000; 
    text-decoration: none; 
} 
.main-nav-ph li a:hover { 
    color: #000; 
} 

$(function() { 
    $('#nav-ph').stop().animate({'margin-right':'-300px'},1000); 

    function toggleDivs() { 
     var $inner = $("#nav-ph"); 
     if ($inner.css("margin-right") == "-300px") { 
      $inner.animate({'margin-right': '0'}); 
      $(".nav-btn-ph").html() 
     } else { 
      $inner.animate({'margin-right': "-300px"}); 
      $(".nav-btn-ph").html() 
     } 
    } 
    $(".nav-btn-ph").bind("click", function(){ 
     toggleDivs(); 
    }); 
}); 

<div id="nav-ph"> 
    <div class="nav-btn-ph">Nav Menu</div> 
    <ul class="main-nav-ph"> 
     <li><a href="#the-banner-advantage">THE ADVANTAGE</a> 
     </li> 
     <li><a href="#banner-services">OUR SERVICES</a> 
     </li> 
     <li><a href="#team">OUR TEAM</a> 
     </li> 
     <li><a href="#banner-news">MAKING NEWS</a> 
     </li> 
     <li><a href="#banner-contact">CONTACT</a> 
     </li> 
    </ul> 
</div> 

Вот ссылка на jsfiddle http://jsfiddle.net/BrentRansom/vb3v5/1/

Answer 1

Если я правильно понял, то попробуйте удалить следующие элементы

.nav-btn-ph { 
    position: absolute; 
    top: -2px; 
    left: -40px; //remove this css, the nav emnu will stay longer 
    width: 40px; 
    height: 35px; 
    display: block; 
    cursor: pointer; 
} 

лучше удалить эту анимацию код, чтобы остаться в пределах края

$('#nav-ph').stop().animate({'margin-right':'-300px'},1000); 

Проверьте это JSFiddle