[技术博客] 导航栏显示与窗口缩放

导航栏显示与窗口缩放

通常当我开发前端网页的时候，我会在一个固定的浏览器中，以一个固定的窗口大小和缩放比例对呈现效果进行观察。如果觉得，诶！很漂亮！那么我就会心满意足的结束这项工作并转身离开。但实际上，这样是存在隐患的。如果我们没有细心设置页面布局与组件的位置，那么在改变窗口大小或者缩放比例时，就可能会出现组件重叠、部分内容无法显示等问题。

在缩小浏览器窗口大小的情况下，导航栏上的导航标签无法在同一行中完全显示，由于其本身的性质决定了导航栏无法成为两栏。在此情况下，本项目采用折叠导航栏navbar-collapse元素与按钮navbar-toggler元素相配合的方式实现这一功能。

导航栏大小适应

.collapse 的作用是当浏览器的窗口宽度小于768px的时候，将设置为collapse样式的div元素内的所有其它元素都折叠起来，以一个列表的形式显示。

.navber-collapse 的作用则是将该div元素设置为折叠起来的导航栏各列表项的父元素。

实际使用代码如下，这是一个id名为navbarsExample07的导航栏，在该栏中即是所要展示的导航标签列表：

<div class="collapse navbar-collapse" id="navbarsExample07">
    <ul class="navbar-nav mr-auto" th:with="view=${#httpServletRequest.getServletPath()}">
        <li class="nav-item" th:classappend="${view=='/'||#strings.startsWith(view,'/index')? 'active' : ''}">
            <a class="nav-link mx-2" href="/index">首页</a>
        </li>
        <li class="nav-item"  th:classappend="${#strings.startsWith(view,'/report-center')? 'active' : ''}">
            <a class="nav-link mx-2" href="/report-center">实验报告中心</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mx-2" href="/question">
                题库
            <span th:if="${#strings.startsWith(view,'/#')}" class="sr-only">(current)</span>
            </a>
        </li>
    </ul>
</div>

当浏览源码时，就会发现如下语句：

@media (min-width: 768px) {

  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  ···
}

由此可见，只有当宽度大于等于768px时，才可显示该元素，否则将会定义如下属性：

.collapse {
    display: none;
}

即是说不显示（折叠）该元素（导航栏）

导航栏折叠后的菜单按钮

除此之外，我们还需要该导航栏折叠后，能通过点击按钮的方式，以形如下拉菜单的方式展开以供选择。项目代码如下：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" 
aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon">
    </span>

</button>

navbar-toggle 与 collapse 相类似，在基础样式设定上都实现了达到一定宽度后改变显示状态的功能。

data-toggle 与 data-target 分别指定了触发事件的类型和事件的目标元素，在这里意味着点击按钮将会对上文的导航栏进行折叠操作。

aria-controls字符串代表了空格分隔的id属性值列表，即navbarsExample07。

aria-expanded代表了导航栏折叠后，初始状态是不显示还是显示出来的。当其值为false时，表示初始状态是折叠的。

aria-label为标记该元素的字符串值。