导航菜单项灵活宽度

Question

我想做一个类似 Zillow.com 的导航菜单，当屏幕缩小时，每个项目的宽度也会缩小一点。这是怎么做到的？

这是我正在处理的 page。

干杯

Answer 1

嗯，从 Zillow.com 的 css 来看，您可以在菜单项 <section class="nav-section nav-dropdown nav-section_wide" > ... </section>

上找到这些属性

css部分是：

.nav-top-container .nav-section {
    width: auto;
    height: 100%;
    -webkit-box-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

根据http://www.w3schools.com/cssref/css3_pr_flex.asp，flex属性Let all the flexible items be the same length, regardles of its content。并且菜单部分的父级 div 具有 css:

max-width: 680px;
-webkit-flex-grow: 10;
-ms-flex-grow: 10;
-webkit-box-flex: 10;
-ms-flex-positive: 10;
flex-grow: 10;

因此它的最大宽度为 680px，但是当屏幕变小 10 时宽度会改变。请参考 http://www.w3schools.com/cssref/css3_pr_flex-grow.asp

导航菜单项灵活宽度

Nav Menu Item Flexi Width

css

nav