Question

在以下网站http://www.halogensoftware.com/uk上，在页面的顶部，有：

公司徽标
导航菜单
导航图标

当浏览器窗口调整大小（更小）时，导航栏＆＃34;触摸＆＃34;徽标，它会自动调整大小以适应。

进一步缩小窗口（再次触及徽标和导航栏的触摸点），它完全隐藏。

这里使用什么技术请伴随这个＆＃34; smart＆＃34;调整？我知道如何一般地使用JQuery / CSS3，但无法弄清楚如何计算可用/已用空间并调整菜单大小（它甚至可能不是这些技术中的任何一种）。我曾尝试在Firebug中进行检查，但无法弄清楚方法。

谢谢。

Answer 1

他们正在使用CSS @media queries。没有JS需要以不同的方式进行布局 - 他们只是缩小浏览器的大小，并且随着布局开始导致事物变得接近和重叠，然后他们在那里定义一个@media查询断点，以便用CSS来区别对待。唯一需要的JS / jQuery是写一些东西作为汉堡包图标/菜单的点击处理程序，以在移动视图中切换导航菜单打开/关闭。

这是一个简单的例子。

$('.burger').on('click',function() {
  $('nav').toggleClass('open');
})

* {margin:0;padding:0;box-sizing:border-box;}
header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 2em;
  position: relative;
  padding: 0 1em;
}
body {
  padding: 2em 0;
}
li {
  display: inline-block;
}

.burger {
  font-size: 1.5em;
  border-radius: .25em;
  background: transparent;
  display: none;
}

@media (max-width: 600px) {
  header {
    font-size: 1.5em;
  } 
}

@media (max-width: 480px) {
  header {
    font-size: 1em;
  }
  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
  } 
  nav li {
    display: block;
    text-align: center;
    background: #eee;
    padding: .5em 0;
    border-bottom: 1px solid #aaa;
  }
  .burger, .open {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>logo</h1>
  <nav>
    <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </nav>
  <button class="burger">&#9776;</button>
</header>

解释导航菜单如何自动适合/调整窗口大小调整大小

1 个答案: