手机导航无法正常工作

我正在使用简单的切换打开和关闭我的手机导航。当导航负载加载手机宽度并显示导航时，应该隐藏导致页面加载比宽度更宽。另外我不能让导航菜单留在页面上，所以当它再次被点击时它会关闭。手机导航无法正常工作

这是我有，我不知道为什么导航显示，然后它没有被点击。

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

来源

2013-10-14 user2751645

如果我理解正确的链接，尝试删除下列项目

.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

来源

2013-10-14 04:13:13 Praveen

删除左侧：-40px为左侧页面上的导航工作，但我遇到的主要问题是在移动时关闭菜单时菜单在页面外侧移动，因此您可以将页面右移看到手机上的菜单。任何想法如何解决这个问题？ – user2751645

我想要做的是当导航栏关闭时，我想隐藏链接，使它们不显示。 – user2751645

@ user2836519不确定移动设备，但对于您的第二项检查此http://jsfiddle.net/vb3v5/4/ – Praveen

手机导航无法正常工作

回答

相关问题