【问题标题】: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/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-07-17
      • 2023-03-11
      • 1970-01-01
      • 1970-01-01
      • 2012-06-18
      • 1970-01-01
      • 2014-07-06
      • 1970-01-01
      相关资源
      最近更新 更多