我的网站上有一个非常简单的菜单系统:http://jsfiddle.net/r7zv2o97/
当我将窗口调整为移动尺寸时,会出现一个按钮 - 太棒了!
当我点击此按钮时,它会隐藏菜单 - 太棒了!
然而,当我将窗口大小调整为桌面大小时,单词Menu
不再出现。
我该如何解决这个问题?
$('#header_nav').prepend('<div id="menu-button"></div>');
$('#menu-button').on('click', function(){
var menuItems = $(".menu-primary-menu-container");
menuItems.toggle();
$(this).toggleClass('active');
});
body {
background:black;
}
#header_nav {
padding-top: 0;
position: relative;
height: 100px;
transition: height .001s ease;
background: #1588cb;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
#menu-button {
display:none;
position: relative;
z-index: 10000;
}
.menu-primary-menu-container {
display:inline-block
}
@media only screen and (max-width: 420px) {
#menu-button {
display: block;
top: 20px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 0px 22px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
#menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 20px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
#menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 20px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#menu-button.active {
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="header_nav">
<nav class="primary menu">
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu">
<li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a></li>
</ul>
</div>
</nav>
</div>
答案 0 :(得分:1)
<强>问题强>:
当您在小型设备中隐藏.menu-primary-menu-container
并在此之后调整窗口大小。它有display:none;
,因此您无法看到.menu-primary-menu-container
。但是,以下代码会覆盖js display:none;
,其中窗口大小高于420px
。
@media only screen and (min-width: 420px) {
.menu-primary-menu-container {
display:inline-block !important;
}
}
答案 1 :(得分:0)
使用此代码小提琴here
$('#header_nav').prepend('<div id="menu-button"></div>');
$('#menu-button').on('click', function () {
var menuItems = $(".menu-primary-menu-container");
menuItems.toggle();
$(this).toggleClass('active');
});
&#13;
body {
background:black;
}
#header_nav {
padding-top: 0;
position: relative;
height: 100px;
transition: height .001s ease;
background: #1588cb;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
#menu-button {
display:none;
position: relative;
z-index: 10000;
}
.menu-primary-menu-container {
display:inline-block;
}
@media only screen and (max-width: 420px) {
#menu-button {
display: block;
top: 20px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 0px 22px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
#menu-button:after {
display: block;
content:'';
position: absolute;
height: 3px;
width: 20px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
#menu-button:before {
display: block;
content:'';
position: absolute;
height: 3px;
width: 20px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#menu-button.active {
}
}
@media only screen and (min-width: 420px) {
.menu-primary-menu-container {
display:inline-block !important;
}
}
&#13;
<div id="header_nav">
<nav class="primary menu">
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu">
<li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a>
</li>
</ul>
</div>
</nav>
</div>
&#13;