在较小屏幕上切换导航栏隐藏和显示会扰乱较大屏幕
在较小屏幕上切换导航栏隐藏和显示会扰乱较大屏幕
提问于 2018-08-06 07:50:03
我一直在尝试使用Flexbox使我的导航栏可折叠。当屏幕变小时，我让导航栏正确切换。但是，当你在较小的屏幕上隐藏导航项目，然后将屏幕变大时，导航项目将不会显示。如果我让它在屏幕变小时打开，那么屏幕变大时，导航项目的伸缩方向被设置为列，而当屏幕变大时，我不想要列。
下面是我的代码：
$(".toggle-btn").click(function() {
$(".nav-toggle").slideToggle("slow");
});/* header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2em;
background-color: #FFB600;
box-shadow: 0 1px 20px #48493e;
z-index: 1;
}
header ul {
display: flex;
}
/*slide menu*/
.nav-btn {
display: none;
position: absolute;
top: 0;
right: 0;
margin: 3.5em 4em 0 0;
}
.toggle-btn {
position: relative;
padding: 0;
width: 4em;
height: 2em;
cursor: pointer;
outline: none;
font-size: 1.2em;
font-family: 'Dosis', sans-serif;
font-weight: bold;
box-shadow: 5px 5px 5px 1px #000;
text-transform: uppercase;
border-radius: 4px;
border: solid 2px #000;
background-color: transparent;
}
.toglge-btn:active {
box-shadow: 3px 3px 5px 1px #000;
top: 2px;
}
@media all and (max-width: 820px) {
header {
flex-direction: column;
}
.nav-brand {
align-self: flex-start;
}
.nav-btn {
display: block;
}
header ul {
flex-direction: column;
text-align: center;
display: none;
}
.nav-items {
line-height: 2;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2 class="nav-brand"><a href="/"> Tequila Grill</a></h2>
<div class="nav-btn">
<button class="toggle-btn">Menu</button>
</div>
<ul class="nav-toggle">
<li><a class="nav-items" href="/">Home</a></li>
<li><a class="nav-items" href="/menu">Menu</a></li>
<li><a class="nav-items" href="/hours">Hours</a></li>
<li><a class="nav-items" href="/location">Location</a></li>
<li><a class="nav-items" href="/catering">Catering</a></li>
</ul>
</header>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-06 07:58:58
给你，兄弟
@media all and (min-width: 821px) {
ul.nav-toggle[style] {
display:flex!important;
}
}这将告诉它在所有大小为821px或更大的视口上添加样式display:flex;。[style]选择器像JS一样插入css内联。
Stack Overflow用户
发布于 2018-08-06 20:27:10
function resiz() {
$(".toggle-btn").click(function() {
$(".nav-toggle").slideToggle("slow");
});
}
resiz();
$(window).on('resize', function() {
resiz();
});它会起作用的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51699107
复制相关文章
相似问题