Question

我想知道是否有可能只有一个CSS导航菜单，当点击或翻转导航元素时切换到显示/隐藏其他div？

以下是我的意思：http://www.johnlewis.com

请注意，在该网站上，即使禁用了Javascript，CSS悬停导航菜单也能正常工作。

问题1：是否有任何有关如何创建此类菜单的教程或示例？我看过并看过一些基于标签的菜单教程，但他们看起来不像这样。

问题2：我是否可以复制该示例，但在单击顶级菜单项时（不仅仅是翻转）也会显示子菜单。这对于无法执行翻转的平板电脑用户会很有帮助。在第一次点击时，我希望显示子菜单。在第二次点击相同的顶级项目时，我希望转到该实际链接。这是否需要JS / JQuery或者它也可以只用CSS吗？

我不介意使用JQuery解决方案，但如果可能的话，我更喜欢CSS解决方案。我只需要一些指针，当然不是一个完整的解决方案。

Answer 1

这可以仅使用CSS与父级div的:hover伪选择器，并在单击它时添加一个类（对于平板电脑）。举一个简单的例子，你需要这样的结构：

<div class="nav-header">
    <h3>My Header</h3>
    <div class="sub-menu">
        <!-- Your sub menu code -->
    </div>
</div>

您的CSS看起来像这样：

div.nav-header div.sub-menu {
    display: none;
}

div.nav-header:hover div.sub-menu, div.nav-header.clicked div.sub-menu {
    display: block;
    /* your positioning code */
}

然后在click事件处理程序中：

function click_handler(eventArgs) {
    // Often, jQuery click event targets are the children of the element you actually want.
    var $navHeader = $(eventArgs.target).hasClass('nav-header') ? $(eventArgs.target) : $(event.target).parents('div.nav-header');

    if ( $navHeader.hasClass('clicked') ) {
        window.location.href = "/yourUrl";
    } else {
        $navHeader.addClass('clicked');
    }
}

显示/隐藏翻转和单击的导航菜单

1 个答案: