Hamburger Navigation Menu

时间:2015-12-30 作者:The Hawk

我有一个Wordpress菜单,我用它作为小型移动设备的汉堡菜单。由于触摸设备实际上没有“悬停”事件,我更改了主菜单项,在“单击”(或“触摸”)上显示相应的子菜单。问题是我无法使主菜单项可单击。此外,我在“wp\\U nav\\U菜单”中没有看到在子菜单上显示顶级项目的选项。这就是我倾向于使用它的方式。我需要一个变通方法或类似的方法。

2 个回复
SO网友:N00b

你可以用其他讨厌的黑客来解决这个问题,但这里有一种类似WordPress的方法:

In your header.php

<?php
// User is not using mobile
if( ! wp_is_mobile() ) {

    wp_nav_menu(); // Your "original menu"    
}
// User is using mobile
else if( wp_is_mobile() ) {

    wp_nav_menu(); // Your another menu that only has top level items
}
?>
请记住wp_is_mobile() 还将平板电脑视为移动设备,您应该始终仔细考虑这一点,因为如果将PC窗口调整为小/窄->则显然不将其视为移动设备。

And jQuery to disable your click event:

var isMobile = false;

// Check if user is using mobile device
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

    isMobile = true;
}

if( ! isMobile ) {

    // Your usual click event
}

SO网友:The Hawk

这很有效。第二次单击转到页面。。。

$(".smallNavigation > ul > li > a").click(function (e) {

    $("ul.sub-menu").hide();
    $("ul.sub-menu", $(this).parent("li")).show();

    e.preventDefault();
    $(this).unbind(e);

})

相关推荐

Making sub-menus exclusive

我真的不知道该怎么解释我在这里找的东西,我在这里找得太露骨了。在我的网站上,我有一个附带菜单,其中包含一系列子类别,每个子类别中都有一些项目。我想知道当我打开另一个子类别时,是否有办法关闭所有其他打开的子类别,例如:1. Animals ----A. Cats ----B. Dogs 2. People ----A. Samantha ----B. Daniel 当我按下“动物”时,我希望“人”关闭,反之亦