菜单文本在从移动设备调整到桌面后消失
Menu Text disappears after resizing from Mobile to Desktop
我的网站上有一个非常简单的菜单系统: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>
问题:
当您在小型设备中隐藏.menu-primary-menu-container
时,然后调整窗口大小。它有display:none;
,所以你看不到.menu-primary-menu-container
。但是,下面的代码覆盖窗口大小高于420px
的js display:none;
。
Jsfidle
@media only screen and (min-width: 420px) {
.menu-primary-menu-container {
display:inline-block !important;
}
}
在中使用此代码
$('#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 {
}
}
@media only screen and (min-width: 420px) {
.menu-primary-menu-container {
display:inline-block !important;
}
}
<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>
相关文章:
- 从桌面读取python文件时高亮显示代码
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时,可拖动的对象会出现在容器外部
- ExtJS——在展开/折叠时调整面板高度
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- Chrome应用程序调整窗口大小保持纵横比
- 如何自动调整标签的高度以适应内容
- 导航栏没有调整到浏览器屏幕的大小
- 调整屏幕大小后不显示子菜单
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- 合并两个数组,重新调整循环js
- Morris.js折线图x轴标签在调整大小后消失
- 调整缩放窗口高度提升缩放
- 调整屏幕大小时更改属性值
- 添加当窗口从移动设备更改为桌面时调整大小事件
- 移动与桌面滚动/调整大小问题
- 菜单文本在从移动设备调整到桌面后消失
- 移动设备和桌面之间的响应式导航调整大小问题
- 如何在Chrome桌面捕获中获取调整大小事件
- 删除小屏幕/移动设备上的输入占位符,但在调整为桌面大小时再次添加它们