0

[ASK]

How do you guys disappear a Menu List when you zooming in the page?

example:

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

[Logo] Profile Gallery Guestbook


<-- Zoom In 120% -->

[Logo] Profile Guestbook


<-- Zoom In 150% -->

[Logo] Guestbook


<-- Zoom In 200% -->

[Logo]

this is my css & div code for it:

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

When you zoom in the page, menu disappear automatically with no scrollbar.

For the example, check out http://www.mashable.com navigation manu

4

2 回答 2

1

他们正在测量内容宽度并将选定的菜单项设置为display: block通过@media 规则。例如

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

所以在内容宽度为 1300px 之前，此应用的菜单项接收默认值display: none;

于 2013-05-29T10:06:41.983 回答
0

您必须使用 well 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;}

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

看这个在行动

于 2013-05-29T10:16:01.823 回答