Question

我为手机制作了一个响应式菜单，但是当我水平转动设备时菜单立即打开，我无法滚动它。唯一的方法是将手机放回纵向位置。请帮忙！我是新来的。

网站为www.josefinaechenique.com

下面的代码：

HTML

 <!--menu mobile-->
 <nav id="navigation_mobile">
  <ul>
    <li><a href="index.html" onclick="location.replace('index.html')">Inicio</a></li>
    <li><a href="biografia.html" onclick="location.replace('biografia.html')">Biografía</a></li>
    <li><a href="musica.html" onclick="location.replace('musica.html')">Música</a></li>
    <li><a href="videos.html" onclick="location.replace('videos.html')">Videos</a></li>
    <li><a href="conciertos.html" onclick="location.replace('conciertos.html')">Conciertos</a></li>
    <li><a href="contacto.html" onclick="location.replace('contacto.html')">Contacto</a></li>

<div class="social_icons2">
<a href="musica.html" onclick="window.open('https://www.instagram.com/lajoseoficial/')"><img src="img/insta_logo.png" width="17" height="17" alt=""/></a> 
<a href="musica.html" onclick="window.open('https://www.facebook.com/lajoseoficial/')"><img src="img/fb_logo.png" width="17" height="17" alt=""/></a>
<a href="musica.html" onclick="window.open('https://www.youtube.com/user/proserfina/')"><img src="img/youtube_logo.png" width="17" height="17" alt=""/></a>
 </div>
  </ul>
</nav>

<!--button toggle-->
<div class="menu_bar">
    <p class="bt-menu"><span class="icon-list2">   
</span>Josefina<br>Echenique</p>
</div>

CSS

#navigation_mobile {
  display: block;
  width: 100%;
  top: -100%;
  margin-top: 66px;
  position: fixed;
  z-index: 9999;
  background-color: #323034;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

#navigation_mobile ul {
  overflow: hidden;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  padding: 0px;
}

#navigation_mobile ul li {
  display: block;
  float: none;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0, .15);
  padding: 12px;
}

.menu_bar {
  width: 100%;
  display: block;
  background-color: #323034;
  position: fixed;
  box-shadow: 20px 5px 15px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

JS

// JavaScript Document
$(document).ready(main);

var contador = 1 ;

function main (){
$('.menu_bar').click(function(){
    if(contador == 1){
        $('nav').animate({
            top: '0'
        });

        contador = 0;
    } else {
        contador = 1;
        $('nav').animate({
            top: '-100%'
        });

    }

});


}

这是问题的图片。

横向posisiton（错误）

Answer 1

问题可能正在发生，因为.menu_bar和#navigation_mobile样式规则具有相同的z-index，但我不能100％确定这是问题。您可以尝试减少#navigation_mobile上的z-index，看看是否有效。

如果这不起作用，这可能会解决您的问题：

修改CSS样式表以从margin-top: 66px中删除#navigation_mobile。然后按如下方式编辑您的Javascript：

// JavaScript Document
$(document).ready(main);

var contador = 1 ;

function main (){
$('.menu_bar').click(function(){
    if(contador == 1){
        $('nav').animate({
            top: '66px'
        });

        contador = 0;
    } else {
        contador = 1;
        $('nav').animate({
            top: '-100%'
        });

    }

});


}

我水平转动设备时响应式移动菜单打开问题

1 个答案: