Question

有这样的菜单（用红色矩形强调）......

我怎样才能（在纯CSS中）使这个响应，以便，如果没有足够的可用宽度，菜单会变成一个下拉列表（或者更小的东西）。

问题不在于实现下拉列表本身，而是如何根据可用空间从一个内容切换到另一个内容。

我知道使用@media max-width查询时这很简单，但问题是我不知道＆＃34;设计时间＆＃34;的菜单项的实际情况。 - 特别是因为文本被翻译和/或更改，导致不同的宽度取决于显示的实际语言。

也许，有一些CSS技巧可以创造一个整体＆＃34;文本＆＃34;如果行/内容不适合父容器，它会消失吗？

Answer 1

这是我刚刚提出的解决方案应该做的工作。我添加了一些风格，使结构更加明显，但它不是像素完美，你必须要照顾它。全屏运行代码段并调整窗口大小以查看其运行情况。

＆＃13;

.table-row{
    display: table-row;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}

.wrapper{
   height:75px; /*the height of your menu, it's critical to define this value equal to the horizontal menu height*/
   overflow:hidden; /*this will hide the horizontal menu when the screen width is too small*/
}

.top_nav{
   padding-right:120px; /*allow space for right section*/
   background-color: green;
   color:white;
}
.top_nav_background{ /* this serves as a background for the rest of the structure, pay attention if you have other z-indexed elements */
   background-color:green; 
   height:85px; 
   width:100%; 
   position:absolute; 
   top:0px; 
   z-index:-1;
}
.floating-box {
    height: 55px;
    padding:10px;
    float: left;
    border: 1px solid #73AD21;
    background-color:green;
}
.h-menu{
    height: 75px;
    float: left;
    min-width: 150px;
    background-color:yellow;
}
.h-menu-item{
   height: 55px;
   padding:10px;
   border: 1px solid #73AD21;
}
.v-menu{
    margin-top:20px;
    height: 20px;
    background-color:red;
}
.right-items{
   position:absolute; 
   right:20px; 
   top:20px; 
   color:white;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="top_nav_background"></div>
<div class="top_nav table-cell">
  
   <div class="wrapper">

     <div class="floating-box">Left section.</div>

     <div class="h-menu table-row">
        <div class="table-cell h-menu-item"><a href="yourpage.htm">item1</a></div>
        <div class="table-cell h-menu-item"><a href="yourpage.htm">item2</a></div>
        <div class="table-cell h-menu-item"><a href="yourpage.htm">item3</a></div>
        <div class="table-cell h-menu-item"><a href="yourpage.htm">long long long item4</a></div>
     </div>
     <div class="v-menu">v-menu</div>
     
   </div>
   
   <div class="table-cell right-items">Right section.</div>
</div>




</body>
</html>

＆＃13;

Answer 2

在我完成的一个项目中，我想出了一个解决方案，您可以在其中显示部分或全部菜单，并在屏幕变小时仅将其显示为下拉菜单/侧边菜单。

子菜单是可选的，您可以使用主菜单来实现效果。

http://codepen.io/anon/pen/LRJoEB

<nav id="top-menu">
  <ul>
    <li class="link menu" tabindex="0">
      Menu
    </li>
    <li class="link">
      <a class="help" href="#">Help</a>
    </li>
    <li class="link">
      <a class="account" href="#">My Account</a>
    </li>
    <li class="sub-nav">
      <nav id="sub-menu">
        <ul>
          <li class="sub-link">
            <a class="details" href="#">My Details</a>
          </li>
        </ul>
        <div id="close-menu" tabindex="0"></div>
      </nav>
    </li>
  </ul>
</nav>

只需更改位和部件以满足您的需求，如果您遇到问题只需发表评论;）

修改

刚刚意识到你不想使用任何媒体查询。我会看到我是否可以在那个方向上拿出一些东西，而不是在我的头顶。

如果内容不适合，CSS规则可以切换内容

2 个答案:

修改