这是我的网站:http://vani.valse.com.my/schone_lightings/index.php。
当我为手机版使用offcanvas菜单时,页面上的任何链接都会变得无法点击。我认为这与z-index有关,但它不会改变任何东西。任何人都可以告诉我为什么会发生这种情况以及如何解决这个问题?
我的css
.off-canvas-fixed {
-webkit-transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
height:100%;
}
.move-right > .off-canvas-fixed {
-webkit-transform: translate3d(15.625rem, 0, 0);
transform: translate3d(15.625rem, 0, 0);
height:100%;
}
.left-off-canvas-menu {
-webkit-transform: none;
transform: none;
margin-left: -15.625rem;
height: 100%;
}
.main-section {
padding:45px 0 0;
}
.tab-bar {
width:100%;
}
@media only screen and (orientation:landscape) and (max-width: 64em){
.main-section {
padding:0 0 0 2.8125rem;
}
.off-canvas-fixed {
width:2.8125rem;
height:100%;
background:#333333;
}
section.left-small{
border:none;
box-shadow:none;
}
}
/*remove opacity for mobile*/
@media all and (max-width : 40em)
{
.row { opacity : 1; }
.cart,.search,.myModal,.reveal-modal {margin-top:50px;}
}
我的HTML
<!-- Off Canvas Nav ----------------------------------------------------------------------------------------------------->
<div class="off-canvas-wrap">
<div class="fixed off-canvas-fixed hide-for-large-up"> <a class="exit-off-canvas"></a>
<nav class="tab-bar">
<section class="left-small"> <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="show-for-portrait right tab-bar-section">
<h1 class="title">Logo</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li class="show-for-small">
</li>
<li><a href="index.php">home</a></li>
<li><a href="productlisting.php" class="selected">product</a></li>
<li><a href="">help</a></li>
<li><a href="">contact</a></li>
<li><a href="">login/sign up</a></li>
</ul>
</aside>
</div>
<div class="inner-wrap"> <a class="exit-off-canvas"></a>
</div>
</div>
编辑:
我移除了移动设备的不透明度控件,然后链接正常工作,除了顶部的搜索链接。但是,我需要删除不透明度并使所有链接正常工作。
/*remove opacity for mobile*/
@media all and (max-width : 40em)
{
/* .row { opacity : 1; } */
.cart,.search,.myModal,.reveal-modal {margin-top:50px;}
}
答案 0 :(得分:1)
.off-canvas-fixed
班级有高度:100%;它覆盖了你的网页。