我为手机制作了一个响应式菜单,但是当我水平转动设备时菜单立即打开,我无法滚动它。唯一的方法是将手机放回纵向位置。请帮忙!我是新来的。
下面的代码:
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%'
});
}
});
}
这是问题的图片。
答案 0 :(得分:0)
问题可能正在发生,因为.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%'
});
}
});
}