Question

[ASK]

当你放大页面时，你们如何消失菜单列表？

示例：

<-- Normal Page [No Zoom] -->

[Logo] Profile Gallery Guestbook


<-- Zoom In 120% -->

[Logo] Profile Guestbook


<-- Zoom In 150% -->

[Logo] Guestbook


<-- Zoom In 200% -->

[Logo]

这是我的css＆amp; div代码：

#nav {list-style-type:none; margin:0px; position:static;}


#nav li a {display:inline-block; width:50; padding: 10 20 10 20; text-align:center;     text-decoration:none; float:left; color:#FFF;}


#nav li a:hover {background:#FFF; color:#000; border-top:3px solid #333;}

<ul id="nav">

<li ><a href="/">Profile</a></li>

<li ><a href="/">Gallery</a></li>

<li ><a href="/">Guestbook</a></li>

</ul>

放大页面时，菜单会自动消失，没有滚动条。

例如，请查看http://www.mashable.com navigation manu

Answer 1

他们正在测量内容宽度，并通过@media规则将所选菜单项设置为display: block。 E.g。

@media screen and (min-width: 1300px) {
    .main-menu>li:nth-child(12) {
        display: block;
    }
}

因此，在内容宽度为1300px之前，此菜单项适用于接收默认display: none;

Answer 2

你必须好好使用overflow:hidden;，结构良好，并正确设计：

HTML：

<div class='nav'>
   <ul>
     <li><a href='#'>One</a></li>
     <li><a href='#'>Two</a></li>
     <li><a href='#'>Three</a></li>
     <li><a href='#'>Four</a></li>
     <li><a href='#'>Five</a></li>
     <li><a href='#'>Six</a></li>
   </ul>
</div>

CSS：

.nav{width:80%; height:50px; background:#e5e5e5; overflow:hidden;} // wrapper for navigation with overflow hidden
.nav ul{margin:0; padding:0; width:100%; overflow:hidden;} // list parent with overflow hidden too
.nav li{display:inline-block; padding:0 20px; height:50px; line-height:50px;}

虽然有更多的方法可以做到这一点，但我喜欢这样简短。

See this in action

放大页面时如何消失菜单列表

2 个答案:

HTML：

CSS：