Html 动态菜单条件

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

我想能够实现一个新的风格，如果菜单下的标志下降了一定的设置。换句话说，这不是基于浏览器的大小，而是客户端最终可能添加到站点的菜单数量。有人知道实现这个的正确语法或方法吗

---

提前谢谢

我打赌你一定有这样的东西

标识菜单

左漂

你能试试吗

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

---

查看结果…

去年4月，他们发布了一个更新版本的flex属性，它适用于大多数浏览器，甚至IE10。它类似于在内联块中显示内容，但它会插入宽度，并允许对任何响应内联元素具有更高的灵活性

下面是对其功能的完整描述。

看看这把小提琴

本质上，您将把这些显示属性放在您希望内联显示的任何对象的父对象上

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 */

---

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

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

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

    /*  Put any styles here   */

}

这意味着当屏幕大小低于699px时，它将执行其约束范围内的任何样式

在响应式设计中，将“视口标记”添加到文档的底部非常重要。这允许浏览器读取用户IE:tablet和smartphone:

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

---

要测试小提琴的响应性，请将浏览器的右侧向左拖动以缩小宽度，只需使用较小的菜单项填充，或根据实际的“媒体查询”视口大小更改较小的字体大小。不要使用浮动li元素，最好使用display inline css属性。您也可以使用JQ计数器，如果元素是研究8项，则将类更改为移动菜单或更小的菜单。Hi Foxsk8，thx获取信息。我采纳了你的建议，减少了菜单上的填充，这是一个很好且简单的解决方案。然而，我不介意菜单掉在商标下面。除了Jquery之外，在这种情况下，您还可以推荐其他选项来应用不同的样式吗？谢谢！谢谢你花时间把这些放在一起。我一定要好好玩玩。在我最初的帖子中，我也许应该更清楚一些。我不介意菜单掉在商标下面。我基本上只是在寻找一个有条件的声明，当菜单重新定位自己的标志下。当它这样做时，我想应用一组不同的样式。浏览器是否有办法确定何时发生这种情况？Hi Jpganz18，thx用于响应。事实上，我并不介意菜单掉在商标下面。我想知道是否有条件css代码可以在菜单重新定位时应用不同的样式集。您可以使用media Queriesshx获取详细消息和反馈Justin。我熟悉媒体查询，但我遇到的问题不是基于浏览器大小。它基于客户端添加的菜单项数量，而不考虑浏览器窗口的大小。例如，当有7个以上的菜单项时，菜单会向下滑动到它自己的行，这很好。我只是想在它这样做的时候能够对它进行样式化。你最好的解决方案是flex属性，你的客户可以添加一些额外的菜单项，但是你应该鼓励你的客户限制出现在顶层的导航元素的数量。过载的导航可能会让用户感到困惑。

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

    /*  Put any styles here   */

}