Question

我想要这个菜单：Horizontal drop down menu推动内容向下移动，是否可能？因为当我在“子菜单”中将位置更改为相对（它推）时，标签a不会像示例那样在同一行中继续。帮助将是欣赏。

Answer 1

您必须对HTML结构执行类似的操作。

<menu>
    <ul>
        <!-- main menu -->
    </ul>
</menu>
<nav>
    <!-- sub navigation -->
</nav>
<main>
    <!-- your content -->
</main>

菜单中的每个元素都需要与子导航中的元素相对应。您可以使用ids和数据属性执行此操作。

//in main menu
<li data-menu="downloads"></li>

//in sub navigation
<div id="downloads"></div>

然后javascript将在主菜单中收听点击事件，然后显示正确的子导航。如果单击两次主菜单项，则应关闭子导航面板。这里的jQuery使其易于阅读：

$('menu').on('click', 'li', function(){
   //get the id of the li
   var id = $(this).attr('data-menu');
   //select the correct element and check it's current visibility
   var navigation = $('#' + id);
   var isHidden = navigation.is(':hidden'); //returns true or false
   //close all navigation items
   $('nav').children('div').hide();
   //if the navigation item was hidden, show it
   if(isHidden){navigation.show()};
});

除此之外，jQuery 3.0 .show()和.hide()做的不仅仅是切换display:none;

如何在水平菜单中使用绝对位置向下推送内容？

1 个答案: