Question

我正在尝试更改网站的子菜单行为。原始子菜单显示为下拉菜单，而我希望它显示在单独的完整水平div中。

到目前为止，我已经做到了：

jQuery(document).ready(function( $ ){
   $(".header").append("<div class='subber'><div class='sub-menu'></div></div>");

$(".main-navigation ul li.menu-item-has-children").mouseover( function() {
    var a = $(this).find(".sub-menu").html();
    $(".subber .sub-menu").html(a);

 }); 
});

...带有一些CSS，效果很好。原始的子菜单HTML被复制到 subber 子菜单。

我希望每个 subber 子菜单都相对于原始菜单项定位，即使它们出现在HTML的不同区域中也是如此。我能以某种方式绑定两者吗？

我的HTML代码：

<div class="header">
    <div id="navigation">
        <div class="site-navigation">
            <nav class="main-navigation">
                <ul class="menu-main-menu">
                    <li class="menu-item">
                        <a href="#">some text</a>
                    </li>
                    <li class="menu-item menu-item-has-children">
                        <a href="#">some text</a>
                        <ul class="sub-menu">
                            <li class="menu=item">
                                <a href="#">sub item text</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="#">some text</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="subber">
        <div class="sub-menu"></div>
    </div>
</div>

Answer 1

由于HTML结构中没有实际的父子关系，因此没有CSS方式可以相对于顶级菜单项定位新的子菜单。

相反，您将不得不使用原始菜单项的坐标，使用JS手动定位新的子菜单。

请记住，这种基本定位不会在两者之间产生“粘滞感”，因此，如果您的主菜单移动了（例如，具有上/下切换状态的滑动菜单栏），则必须触发更新使用侦听器和功能进行子菜单定位。

Codepen

$("#menuItem1").mouseover( function() {
  
  /* get original menu */
  var origMenu = $(this);
  
  /* grab content out of original sub-menu */
  var myContent = origMenu.find(".sub-menu").html();
  
  /* copy content over to new sub-menu outside of navigation */
  $(".subber .sub-menu").html(myContent);
  
  /* get the coordinates of the original menu item */
  var subberLeftOffset = origMenu.offset().left;
  var subberTopOffset = origMenu.offset().top + origMenu.innerHeight(true);
   
  /* re-position the new sub-menu so it appears below the original menu */
  $(".subber").offset({top: subberTopOffset, left: subberLeftOffset});;
 });

#origNavigation .sub-menu {
  visibility: hidden;
  height: 0px;
}


#menuItem1 {
  margin-top: 8em;
  margin-left: 8em;
  padding: 1em;
  width: 200px;
  border: 1px solid black;
}

<div id="origNavigation">
  <div id="menuItem1">
    Hello
  <div class="sub-menu">Sub-menu</div>
</div>

</div>

<div class="subber">
  <div class="sub-menu"></div>
</div>

将子菜单项相对于主菜单项定位，但在外部div中

1 个答案: