WordPress 拆分菜单

Question

我正在编写我的第一个 WordPress 主题并尝试解决这个问题：

1. 在网站的桌面版本中，我想将菜单分成 2 个部分。一个会出现在徽标的左侧，另一个会出现在我的徽标的右侧（徽标居中）。我知道如何做到这一点的唯一方法是在 WP 中创建 2 个单独的 MENU 对象，然后相应地使用 CSS 定位每个对象。

2. 但是，当我想将菜单转换为适合移动设备的下拉菜单时，这会导致问题，因为在上面显示的方法中，我最终得到了 2 个单独的菜单项列表（左侧和右侧）和我不知道如何将它们合并到一个适合移动设备的下拉菜单列表中。

例如，我知道我可以编写自定义 CSS 来在菜单项 #2 和项目 #3 之间添加边距。但是由于我正在编写一个主题，这种方法将不起作用，因为它需要预先知道将存在多少菜单项。无论菜单项的数量如何，我都需要它能够工作，并且允许人们使用 WP Menu UI 重新排列菜单项。

这是解决这个问题的错误方法吗？如果您能建议如何更好地解决这个问题，我将不胜感激。

Answer 1

不确定如何在 WP 中执行此操作。但是，您可以使用一点 jQuery 来计算有多少顶级导航项，将这个数字向上取整（以支持奇数个导航项），然后将一个类添加到您想要出现的最后一个元素上徽标的左侧。然后在该类上添加样式以在它和下一个导航项之间添加空间。

$(function(){
 var navElements = $('.nav > li'),
     navElementsLength = $(navElements).length,
     middle = navElementsLength / 2,
     middle = Math.round(middle);
 $(navElements).eq(middle-1).addClass('left');
});

http://www.bootply.com/ZKxhal2RgD#

Answer 2

如果有人感兴趣，这就是我解决此问题的方法，并且效果非常好：

https://wordpress.stackexchange.com/questions/144580/wordpress-split-menu/147432#147432

Answer 3

可以使用 CSS：

ul.2-columns {
  -moz-column-count: 2;
  -moz-column-gap: 60px;
  -webkit-column-count: 2;
  -webkit-column-gap: 60px;
  column-count: 2;
  column-gap: 60px;
}