如何解决在导航菜单中禁用“寄生”链接行为
当我单击主导航菜单中的根菜单元素以打开其项目(该根元素中的链接)时,所选链接(根元素)的单击操作也触发了这件事。问题出现在该主题的移动视图上。 我已经试过了
@media (max-width: 768px) {
.ct-main-navigation > .menu-item > a {
pointer-events: none;
}
}
但是这个技巧只是禁用了菜单根元素的链接。 如何以正确的方式实现目标?
还有一个想法:使用 wp_nav_menu_items 钩子重新创建导航,但我不想破坏原始设计,也不知道如何准确地做到这一点。
HTML
<nav id="ct-main-nav__wrapper" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul id="menu-menu" class="ct-main-navigation"><li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"><a href="https://demo.curlythemes.com/private-jet/services/">Services</a>
<ul class="sub-menu">
<li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333"><a href="https://demo.curlythemes.com/private-jet/services/private-jet-2/">Private Jet Charters</a></li>
<li id="menu-item-409" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-409"><a href="https://demo.curlythemes.com/private-jet/services/business-jets/">Business Jets Charters</a></li>
<li id="menu-item-410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-410"><a href="https://demo.curlythemes.com/private-jet/services/helicopter-charters/">Helicopter Charters</a></li>
<li id="menu-item-408" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-408"><a href="https://demo.curlythemes.com/private-jet/services/air-taxi-services/">Air Taxi Services</a></li>
</ul>
</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-78"><a href="https://demo.curlythemes.com/private-jet/about-us/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-299" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-299"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-values">Our Values</a></li>
<li id="menu-item-300" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-history">Our History</a></li>
<li id="menu-item-301" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-301"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-fleet">Our Fleet</a>
<ul class="sub-menu">
<li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">CESSNA 208 GC</a></li>
<li id="menu-item-304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">DE HAVILLAND DHC-8-200</a></li>
<li id="menu-item-396" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-396"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">BOMBARDIER JET 200</a></li>
<li id="menu-item-397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-397"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">EMBRAER 175</a></li>
</ul>
</li>
<li id="menu-item-302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-302"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-team">Our Team</a></li>
</ul>
</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="https://demo.curlythemes.com/private-jet/empty-legs/">Empty Legs</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="https://demo.curlythemes.com/private-jet/news/">News</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="https://demo.curlythemes.com/private-jet/contact/">Contact</a></li>
</ul> </nav>
原始 CSS
.ct-main-navigation .menu-item-has-children > a::before,.ct-main-navigation .page_item_has_children > a::before {
content: "";
position: relative;
font-family: 'themify';
display: inline-block;
-webkit-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
}
.ct-main-navigation .menu-item-has-children > a::before,.ct-main-navigation .page_item_has_children > a::before {
float: right;
margin: 0 0.5rem;
display: inline-block; }
@media (min-width: 48em) {
.ct-main-navigation .menu-item-has-children > a::before,.ct-main-navigation .page_item_has_children > a::before {
font-size: 0.5rem;
line-height: 2.25;
margin-right: 0;
} }
@media (min-width: 576px) {
.ct-main-navigation .menu-item .menu-item-has-children > a::before,.ct-main-navigation .page_item .page_item_has_children > a::before {
content: '\e649';
line-height: 2.2;
} }
.ct-main-navigation a {
text-decoration: none;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
display: block;
padding: 0.25rem 0; }
修改后的 CSS
@media (max-width: 768px) {
.ct-main-navigation .menu-item-has-children::before,.ct-main-navigation .page_item_has_children::before {
position: absolute;
right: 0px;
height: 100%;
padding-right: 10px;
padding-top: 7px;
top: 0;
z-index: 5;
width: 40px;
text-align: right;
content: '';
font-family: 'themify';
display: inline-block;
-webkit-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
}
.ct-main-navigation .menu-item-has-children > a::before,.ct-main-navigation .page_item_has_children > a::before {
display: none;
}
}
如何使修复程序不仅适用于 Android 设备,还适用于 iOS?
当前的 CSS 修复破坏了 iPad(iOS) 设备上的导航菜单标记。
解决方法
根据要求,以下是一个可能的解决方案的最小示例:
const icon = document.querySelector('.chevron-down');
/* for mobile devices you may also use "touchend" event */
icon.addEventListener('click',(e) => {
const subMenu = e.currentTarget.nextElementSibling;
subMenu.style.display = 'block'
});
ul {
list-style: none;
}
ul li {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
i.chevron-down:before {
content: "";
position: relative;
font-family: themify;
display: inline-block;
-webkit-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
font-style: normal;
}
.sub-menu {
display: none;
flex-basis: 100%;
}
<ul>
<li>
<a href="https://demo.curlythemes.com/private-jet/services/">Services</a>
<i class="chevron-down"></i>
<ul class="sub-menu">
<li>Private etc.</li>
</ul>
</li>
</ul>
这不是一个完全有效的解决方案,需要进行调整,但它应该可以帮助您入门。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。