Javascript 放大页面时如何显示菜单列表

[提问]

当你们放大页面的时候，你们是怎么消失菜单列表的

例如：

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

[Logo] Profile Gallery Guestbook


<-- Zoom In 120% -->

[Logo] Profile Guestbook


<-- Zoom In 150% -->

[Logo] Guestbook


<-- Zoom In 200% -->

[Logo]

---

放大页面时，菜单将自动消失，无需滚动条

---

例如，查看navigation manu

他们正在测量内容宽度，并通过@media rules将所选菜单项设置为

display:block

。例如

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

---

因此，在内容宽度为1300px之前，此应用的菜单项将接收默认的

display:none
你必须使用好
溢出：隐藏，良好的结构和样式：

HTML:
虽然有更多的方法可以做到这一点，但我喜欢这样做的方式简短和简单

这是由于
溢出：隐藏，您应该知道如何使用它。
<ul id="nav">

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

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

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

</ul>

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

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

.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;}