【问题标题】：WordPress: Dynamic Menu ConditionalWordPress：有条件的动态菜单
【发布时间】：2014-10-02 09:04:10
【问题描述】：

我有一个 WordPress 网站，其中菜单浮动到标题中徽标的右侧。徽标约占宽度的 25%，其余 75% 包含 7 个菜单选项。如果添加了第 8 个菜单选项，它会超出可用空间，整个菜单基本上会在徽标下方向下移动。我相信你们中的许多人都熟悉这种菜单响应。

如果菜单低于徽标，我希望能够实现一组新样式。因此，换句话说，这不是基于浏览器大小，而是基于客户端最终可能添加到站点的菜单数量。有谁知道实现这个的正确语法或方法吗？

提前致谢！

【问题讨论】：

只需使用较小的菜单项填充，或在实际媒体查询视口大小上更改较小的字体大小。并且不要使用浮动的 li 元素，最好使用 display-inline css 属性。你也可以使用 JQ 计数器，如果元素是研究 8 个项目，则将类更改为移动菜单或更小的菜单。
嗨 Foxsk8，谢谢你的信息。我听取了您的建议并减少了菜单上的填充，这是一个不错且简单的解决方案。但是，我不介意菜单位于徽标下方。除了 Jquery，还有什么其他选项可以推荐用于在发生这种情况时应用不同的样式？谢谢！

标签： html css wordpress

【解决方案1】：

去年 4 月，他们发布了 flex 属性的更新版本，这适用于大多数浏览器，并且一直到 IE10。就像显示内联块一样，但它会插入宽度，并允许任何响应式内联元素具有更高的灵活性

这里是对其功能的完整描述。 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

看看这个小提琴

http://jsfiddle.net/yznby99f/3/

基本上，您会将这些显示属性放在您希望内联显示的任何内容的父级上。

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: -moz-box; /* MOZILLA */
display: flex; /* standard syntax */

【讨论】：

感谢您花时间整理这些内容。我肯定会玩弄它。我也许应该在我的原始帖子中更清楚。我不介意菜单位于徽标下方。我基本上只是在寻找菜单在徽标下重新定位时的某种条件语句。当它这样做时，我想应用一组不同的样式。有没有办法让浏览器确定何时发生这种情况？

【解决方案2】：

我打赌你有这样的东西

LOGO菜单

向左浮动

你可以试试

#logo{
    width:40%;
    background:green;    
    height:20px;
    float:left;
}
#menu{
    min-width:60%;
    background:blue;    
    height:20px;
    display:inline-block;
}

看看结果...

【讨论】：

您好 Jpganz18，感谢您的回复。我实际上不介意菜单位于徽标下方。我想知道是否有条件 css 代码可以在菜单重新定位发生时应用一组不同的样式。
你可以使用媒体查询

【解决方案3】：

使用前面的小提琴示例，我添加了一小段代码来解决您的问题！

http://jsfiddle.net/yznby99f/4/

当 CSS3 发布时，响应式网页设计中的一个巨大的关键可供使用。这就是所谓的媒体查询。

@media all and (max-width: 699px){

    /*  Put any styles here   */

}

http://www.w3schools.com/css/css_mediatypes.asp

这意味着当屏幕尺寸低于 699 像素时，它将执行其约束范围内的任何样式。

在响应式设计中向文档添加“视口标签”很重要。这允许浏览器读取用户 IE 的设备宽度：平板电脑和智能手机：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

您还可以设置样式发生在 2 个像素宽度之间的时间：

@media all and (max-width: 699px) and (min-width: 500px){

    /*  Put any styles here   */

}

要测试小提琴的响应能力，请将浏览器的右侧拖到左侧以缩小宽度

【讨论】：

感谢贾斯汀的详细信息和反馈。我熟悉媒体查询，但我遇到的问题不是基于浏览器的大小。它基于客户端添加的菜单项的数量，而与浏览器窗口大小无关。例如，当菜单项超过 7 个时，菜单会向下滑动到自己的行，这很好。我只是希望能够在它这样做时对其进行样式设置。
您最好的解决方案是 flex 属性，您的客户可以添加一些额外的菜单项，但您应该鼓励您的客户限制出现在顶层的导航元素的数量。过载的导航可能会让用户感到困惑。