这是我对堆栈溢出的第一篇文章。我在开发响应式网站布局时遇到了一些困难。当我的浏览器窗口宽度小于400像素时，我的菜单更改为移动样式设计。需要的内容被推下来，只有当菜单扩展（CSS）

你可以看到下面的展开形式的这样一个例子：

我想实现的是，当我点击“菜单”崩溃的下拉列表中，下面的内容应该动起来到菜单下方。

另一种形象，有利于说明问题：

正如你可以看到有这显然是一个小的显示屏上相当低效的含量高于空白。

其展开菜单项风格像这样为默认值：

{ 
visibility: hidden; 
}

我觉得这是问题的一部分，因为列表项是有，但只是被隐藏了，但我不确定。

对于这个问题的基本性质，我很抱歉，因为我是一名学习者，现在只有开始涉足高效响应式设计。

任何建议将是有益的，

感谢，

史蒂夫。

来源

2014-08-30 omusanon

如果使用

visibility: hidden;

你只是隐藏的元素，但他们仍然会存在，占用空间。

如果你不想那些，使用

display: none;

来源

2014-08-30 23:12:34 Oriol

这似乎正是我需要工作。谢谢回答。 – omusanon 2014-08-30 23:35:38

你可以尝试使用：

display:none;

能见度不改变元素的大小。

来源

2014-08-30 23:13:31 Matzach

DEMO

CSS：

*{margin:0;padding:0; box-sizing:border-box;} 

section{ 
    width:200px; 
    border:1px solid #ccc; 
    transition: all 3s ease; 
} 

section menu, section article{ 
    display:block; 
    width:100%; 
    clear:both; 
} 
section{ 
    text-align: center; 
} 
article img{ 
    width:150px; 
    height:150px; 
    background:#333; 
} 
menu{ 
    height:0px; 
    overflow:hidden; 
} 
menu li{ 
    list-style:none; 
    padding:6px 2px; 
    width:100%; 
} 
menu.active{ 
    height:auto; 
} 
button{cursor:pointer;}

HTML：

<section> 
    <button>Click ME</button> 
    <menu> 
     <li>Users</li> 
     <li>Gallery 1</li> 
     <li>Gallery 2</li> 
     <li>Apps</li> 
    </menu> 
    <h2>Users</h2> 
    <article> 
     <div><img/></div> 
     <div><img/></div> 
     <div><img/></div> 
     <div><img/></div> 
     <div><img/></div> 
    </article> 
</section>

JS：

var clickMe = document.querySelector("button"), 
    menu = document.querySelector("menu"); 
clickMe.addEventListener('click', function() { 
    menu.classList.toggle("active"); 
});

来源

2014-08-30 23:23:02

需要的内容被推下来，只有当菜单扩展（CSS）

回答

DEMO

相关问题