[英]Drop Down Hamburger Menu Responsive
我用著名的汉堡包图标创建了一个下拉菜单。 当页面加载时和/或在向下滚动页面之前,它会完美下降,但是如果我向下滚动然后向上滚动,当我单击图标时,它将导航列表减半,不再显示它的内容在滚动之前做了。 我不确定为什么要这么做。
这是脚本:
<script>
$(document).ready(function (){
$('.nav-btn').on("click", function() {
$('#main-nav').slideToggle("slow");
$(window).resize(function() {
if($(window).width() > 600) {
$("#main-nav").removeAttr("style");
}
});
});
});
</script>
这是HTML(在标题内):
<span class="nav-btn"></span>
<nav id="main-nav">
<ul>
<li><a href="#home" class="scroll">HOME</a></li>
<li><a href="#about" class="scroll">ABOUT</a></li>
<li><a href="#portfolio" class="scroll">PORTFOLIO</a></li>
<li><a href="#contact" class="scroll">CONTACT</a> </li>
</ul>
</nav>
这是CSS:
#main-nav {
text-align: center;
display: none;
background-color: #F1F1F1;
}
#main-nav li {
display: block;
border-bottom: 5px #565656 solid;
padding: 5px 0 5px 0;
}
#main-nav li:last-child {
border-bottom: none;
}
#main-nav ul li {
font-size: 1em;
font-family: 'montserratregular';
text-align: left;
}
.nav-btn {
display: block;
background-color: #F1F1F1;
color: #333;
font-size: 40px;
text-align: left;
cursor: pointer;
}
.nav-btn:before {
content: url("hamburger.png");
padding-left: 15px;
}
您有一个在#headwrapper div上应用130px高度的JavaScript。
<div id="headwrapper" class="" style="height: 130px;">
当我把菜单上的130px删除时,菜单将正常运行。 它似乎是在滚动添加它,所以当我滚动回到顶部时,javascript再次启用了它。 尝试将其更改为height: auto
或者将其设置为height: auto; max-height: 1000px;
而不是设置固定的高度height: auto; max-height: 1000px;
height: auto; max-height: 1000px;
或类似的东西。 这应该解决您遇到的问题。
编辑*:而不是像您一样更改内联的高度,我建议放置一个max-height: 75px;
在您的.small
并增加一个height: auto; max-height: 1000px;
height: auto; max-height: 1000px;
在#headwrapper
。 如果将它与css-transition一起使用,则应具有与现在相同的效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.