水平 wordpress 菜单中心的空格答案

【问题标题】：Space in the center of a Horizontal wordpress menu水平 wordpress 菜单中心的空格
【发布时间】：2012-08-21 01:29:17
【问题描述】：

我正在寻找一个独特问题的解决方案。我为多站点构建开发的主题的“网络菜单”下方有一个 wp_menu。菜单中心有一个小环，上面有标志，我很好奇是否有办法让一个透明的列表项保持那个位置，并允许所有其他“合法”的列表项环绕它，所以要么向左要么向右。

我已经有一个过滤器，可以插入一个列表项，我可以通过添加 css 来自定义，我只是不知道如何让一个列表项特别保留圆圈存在的位置。

该网站是： http://www.mountainjackscreative.com/sandbox/edts/sample-page/

任何帮助，甚至只是想法都会很棒！

谢谢大家。

【问题讨论】：

标签： wordpress list menu placeholder

【解决方案1】：

由于您使用的是 jQuery，您可以在菜单上做一些数学运算。

编辑：把它放在你的 head 标签结束之前

LAST_EDIT： 这是 JS 小提琴 http://jsfiddle.net/BsnFW/14/。最后一次尝试:)

$(document).ready(function() {

    menuBreakPoint = 200; //width in px after which you want to insert the space (experiment with this)
    menuWidth = 0;
    rightMenuStart = 600; //width in px from left of menu container div to the right


    $('.sub_site_menu li').each( function() {
        menuWidth += $(this).width();
    if (menuWidth >= menuBreakPoint) {
       $(this).css('margin-left', (rightMenuStart - menuWidth));
       return false; //break out of each loop
    }
    });

});

使用这个。

【讨论】：

我已尝试实现您提供的代码，但在使其正常工作时遇到了一些麻烦。我已将其插入文档的开头。那是正确的地方吗？我还将菜单重命名为 .sub_site_menu，并稍微更改了数字，但没有运气。
已适当编辑。您也可以将它放在一个单独的文件中并通过执行来引用它
做到了！万分感谢。 Jquery 在接下来要学习的列表中。它开启了大量的可能性！
开枪！虚惊。出于某种原因，它似乎奏效了。我认为它是在添加列表项后执行该功能，因此当它到达触发项时会为错误创造空间。如果有办法获取列表项的宽度，而不是添加它，然后根据断点验证整体宽度，那将是理想的。感谢您迄今为止的所有帮助。
对不起，由于某种原因，那个 JS 小提琴仍然有错误......这是一个有效的http://jsfiddle.net/BsnFW/9/

【解决方案2】：

你不能把列表分成两部分吗？一左一右浮动。提供适当的 ul 边距，以便徽标上不显示任何内容？

【讨论】：

唯一的问题是内容是动态生成的。因此，每个单独的站点都会有不同的菜单需求，因此最好在菜单中对项目进行某种“间隙”硬编码以环绕。如果它是一个静态菜单，我很想制作两个单独的列表，然后将它们浮动。

【解决方案3】：

我将使用 jquery 解决方案，因为它很可能会在所有浏览器中呈现最佳结果。但我确实偶然发现了这个关于即将在 CSS3 中实现的功能的其他资源

包含一个强制兼容新 CSS3“列”功能的脚本。

http://www.csscripting.com/css-multi-column/

【讨论】：