移动设备上的固定标记块属性

我制作了我的平板电脑和移动菜单横向设备click。我将自己的主题元素显示为块元素，因为我想让我的元素全屏显示，但是当我使用width:100%时，它没有工作和我在这个论坛上问，有些人告诉我，我需要使我的锚元素display:block，并从我的李元素删除我的风格。它的工作，但现在的问题是当你在手机或平板设备上，然后单击在具有子菜单的菜单上，它将您重定向到页面，而不是将菜单放下。可以有人帮我解决这个问题。有我的代码：移动设备上的固定标记块属性

/****************************************** 
 
      Tablet Menu Style 
 
*******************************************/ 
 
.tablet-menu{ 
 
display:none; 
 
background:#000; 
 
position:fixed; 
 
width:100%; 
 
height:100%; 
 
opacity:0.7; 
 
z-index:1001; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    transition: all 0.8s ease-in-out; 
 
    -webkit-transition-delay: 0.2s; 
 
    -moz-transition-delay: 0.2s; 
 
    transition-delay: 0.2s; 
 
} 
 
.tablet-menu.show{ 
 
display:block; 
 
} 
 
.tablet-menu ul{ 
 
position:relative; 
 
width:100%; 
 
text-align:center; 
 
padding:0; 
 
margin:0; 
 
} 
 
.tablet-menu li{ 
 
color:#FFF; 
 
background:#000; 
 
} 
 
.tablet-menu li a{ 
 
text-transform: uppercase; 
 
font-family: "Roboto Slab", Times, Georgia, serif; 
 
font-weight:bold; 
 
border-radius:2px; 
 
border-bottom:1px solid white; 
 
position:relative; 
 
display:block; 
 
padding-top:4%; 
 
padding-bottom:4%; 
 
} 
 
.tablet-menu ul li ul{ 
 
display:none; 
 
} 
 
.tablet-menu li:hover ul, .tablet-menu li ul li ul { 
 
display:block; 
 
margin-left:20px; 
 
margin-right:20px; 
 
} 
 
.tablet-menu li:last-child{ 
 
border:none; 
 
} 
 
.tablet-menu li > a:after{ 
 
content: "\33"; 
 
font-family: "ElegantIcons"; 
 
} 
 
.tablet-menu li a:only-child:after, .tablet-menu li li a:after{ 
 
content:""; 
 
} 
 
/* 
 
.tablet-menu li .sub-menu a:last-child:after{ 
 
content:"32"; 
 
} 
 
*/ 
 
.tablet-menu li a:hover{ 
 
background:#fff; 
 
color:#000; 
 
}

<div class="tablet-menu"> 
 
    <ul class="tablet-menu-ul"> 
 
      <li> 
 
      <a>test</a> 
 
      </li> 
 
      <li> 
 
      <a></a>                  <ul> 
 
       <li> 
 
        <a>test1</a> 
 
        <ul> 
 
         <li> 
 
        <a></a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
       <li> 
 
        <a>test2</a> 
 
       </li> 
 
       <li> 
 
        <a>test3</a> 
 
       <ul> 
 
        <li> 
 
        <a>test4</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       </nav> 
 
      </div>

我想，当有子菜单元素的用户点击，该子菜单显示。如果您需要更多信息，请在这里写下。编辑：我在wordpress上工作，我想我已经重新在这里的菜单代码，因为在wordpress它只是PHP代码。

来源

2016-11-28 Dako

请注明'HTML'为好。 –

完成需要15个字符才能发表评论; D – Dako

那么，这将不会实现使用简单的CSS。你必须使用JS来实现这一点，并且在你的HTML中稍作修改。

插入，如果有孩子
使用JS，has-child点击显示子菜单上，反之亦然。

确保在处理has-child单击事件时添加了event.preventDefault()。

或者

使用第三方插件，它会处理这样的情况。这是我得到的最好的，并且直到现在才安静地使用 - http://mmenu.frebsite.nl/

干杯！

来源

2016-11-28 09:29:31

我尝试了一些这样的：http://prntscr.com/dcvwg1但它只是删除了菜单的功能，当你点击某件事情时什么也没有发生;/ 我没有真正的知道专业网站是如何实现这一目标的;/ – Dako

我认为你应该尝试一下现成的插件，它可以更快地帮助你。 –

我不喜欢用我自己写的所有插件，我做了一些我想要的内容将在一分钟内发布结果。 – Dako

我做了一些接近的事情，我最终的结果是这里是jQuery代码。

$('.mobile-menu li').click(function(ev) { 
 
    if($(this).children('ul').is(':visible')) 
 
     return true; 
 
    if($(this).children('ul').toggle("slow").length) 
 
     return false; 
 
    ev.stopPropagation(); 
 
});

来源

2016-11-29 10:42:29 Dako

移动设备上的固定标记块属性

回答

相关问题