时间戳

首页 > 解决方案 > 创建一个隐藏的导航栏，该导航栏仅在定义的大小下可见

javascript - 创建一个隐藏的导航栏，该导航栏仅在定义的大小下可见

问题描述

我目前正在接受培训并执行一个公共线程项目，我想从使用响应式导航栏的同志中脱颖而出，该导航栏显示一个带有“隐藏”菜单的汉堡菜单，该菜单在缩小窗口后显示为页脚。（仅从特定维度出现）例如网站https://www.parcasterix.fr/

绞尽脑汁3天没找到谢谢

标签： javascripthtmlcss

解决方案

从基础开始，制作一个容器并使用漂亮的自然 HTML 标记。

自然，元素在 中display:block，这使它们遵循页面大小。您可以制作它们display:inline-block，使它们保持在同一条线上，但始终遵循流程，并显示其内容。

不需要复杂，至少在开始时是这样。但即使在之后。

.container {
  resize: both;
  overflow: auto;
  width: 80%;
  height: 140px;
}

div {
  border:  1px black solid;
  display: inline-block;
  padding: 10px; /* Just to make it nicer */
}
<div class="container">

  <!-- Insert your content here and try to resize with the handle on the 
  bottom right corner -->
  
  <div>Some content</div>
  <div>And some more. Hey did you notice?</div>
  <div>Elements are just following the flow!</div>

</div>

推荐阅读