为什么这个移动导航开关不能正常工作?
Why this mobile navigation toggle not working properly?
我正在尝试在断点 768px 上创建移动导航(切换类型)。
我的加分是:
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div id="nav">
<div class="navigasi_menu">
<div class="navigasi_list">
<div class="nav-menu">
<ul>
<li class="page_item page-item-7"><a href="#">Home</a></li>
<li class="page_item page-item-2"><a href="#">Sample Page</a></li>
<li class="page_item page-item-9"><a href="#">test page 1</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
此移动导航应隐藏屏幕宽度在 768 像素以上。所以我将以下 java 脚本代码放入 header:
/* Mobile navigation*/
jQuery(document).ready(function() {
$('#nav').hide();
$('.menu_icon').click(function() {
$('#nav').slideToggle('fast');
return false;
});
});
然后我将以下 CSS 代码放入我的样式中 sheet:
/* Primary mobile menu */
.tm_menu_mobile {
display: block;
margin: 15px auto !important;
width: 98.5% !important;
background:#0071B7;
padding:6px;
height:auto;
overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
.navigasi_menu {
width: 100%
}
.navigasi_menu li {
float: none;
text-align: center;
border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
.navigasi_menu li:hover {
width: 100%
}
.tm_menu_mobile .menu_icon {
width:50px;
height:50px;
border-radius: 10px;
border:2px solid #000;
float:right;
margin-right:10px;
}
.menu_icon .three_line {
float:none;
width:36px;
height:5px;
background:#fff;
margin:9px auto;
}
.tm_menu_mobile #nav {
display: inline-block;
}
但切换不起作用。
另外,当我将导航悬停在 768px 屏幕上时,它不稳定...它是第 3 里高于第 1..
但相同的 js fiddle 工作 here the sample js toggle I tested
我正在尝试的网站有点不同。 SITE
我怎样才能让它工作?
该问题与 wordpress 有关??
试试这个:
<script type="text/javascript">
/* Mobile navigation toggle*/
jQuery(document).ready(function() {
jQuery('.tm_menu_mobile #nav').hide();
jQuery('.menu_icon').click(function() {
jQuery('.tm_menu_mobile #nav').slideToggle('fast');
return false;
});
});
</script>
我正在尝试在断点 768px 上创建移动导航(切换类型)。
我的加分是:
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div id="nav">
<div class="navigasi_menu">
<div class="navigasi_list">
<div class="nav-menu">
<ul>
<li class="page_item page-item-7"><a href="#">Home</a></li>
<li class="page_item page-item-2"><a href="#">Sample Page</a></li>
<li class="page_item page-item-9"><a href="#">test page 1</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
此移动导航应隐藏屏幕宽度在 768 像素以上。所以我将以下 java 脚本代码放入 header:
/* Mobile navigation*/
jQuery(document).ready(function() {
$('#nav').hide();
$('.menu_icon').click(function() {
$('#nav').slideToggle('fast');
return false;
});
});
然后我将以下 CSS 代码放入我的样式中 sheet:
/* Primary mobile menu */
.tm_menu_mobile {
display: block;
margin: 15px auto !important;
width: 98.5% !important;
background:#0071B7;
padding:6px;
height:auto;
overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
.navigasi_menu {
width: 100%
}
.navigasi_menu li {
float: none;
text-align: center;
border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
.navigasi_menu li:hover {
width: 100%
}
.tm_menu_mobile .menu_icon {
width:50px;
height:50px;
border-radius: 10px;
border:2px solid #000;
float:right;
margin-right:10px;
}
.menu_icon .three_line {
float:none;
width:36px;
height:5px;
background:#fff;
margin:9px auto;
}
.tm_menu_mobile #nav {
display: inline-block;
}
但切换不起作用。 另外,当我将导航悬停在 768px 屏幕上时,它不稳定...它是第 3 里高于第 1..
但相同的 js fiddle 工作 here the sample js toggle I tested 我正在尝试的网站有点不同。 SITE
我怎样才能让它工作? 该问题与 wordpress 有关??
试试这个:
<script type="text/javascript">
/* Mobile navigation toggle*/
jQuery(document).ready(function() {
jQuery('.tm_menu_mobile #nav').hide();
jQuery('.menu_icon').click(function() {
jQuery('.tm_menu_mobile #nav').slideToggle('fast');
return false;
});
});
</script>