Semantic-UI 菜单流体变化

如果你正在使用 Semantic-UI 框架开发网站，在设计页面时可能会需要一个动态的菜单，可以根据不同设备的屏幕尺寸自适应大小。这时候就需要使用 Semantic-UI 的菜单流体变化特性。

原理

Semantic-UI 的菜单流体变化特性主要是基于 CSS3 的媒体查询与 JavaScript 的 DOM 操作实现的。在菜单流体变化的过程中，会根据设备的屏幕宽度自动改变菜单的样式和布局。

使用方法

使用菜单流体变化特性非常简单，只需要在菜单模块的 HTML 代码中添加一些特定的 CSS class 和 JavaScript 代码即可。

<!-- 品牌标识与菜单按钮 -->
<div class="ui container">
  <div class="ui large secondary pointing menu">
    <a class="toc item">
      <i class="sidebar icon"></i>
    </a>
    <a class="logo item">
      <img src="logo.png">
    </a>
    <a class="item" href="#">首页</a>
    <a class="item" href="#">产品</a>
    <a class="item" href="#">服务</a>
    <a class="item" href="#">关于</a>
    <div class="right item">
      <a class="ui button" href="#">登录</a>
    </div>
  </div>
</div>

以上代码是一个 Semantic-UI 的标准的响应式菜单，其高度为 50px。当浏览器宽度变小时，菜单会自动转化为一个下拉菜单。

<div class="ui container">
  <div class="ui large secondary pointing menu">
    <a class="toc item">
      <i class="sidebar icon"></i>
    </a>
    <a class="logo item">
      <img src="logo.png">
    </a>
    <div class="right item">
      <a class="ui button" href="#">登录</a>
    </div>
    <div class="ui simple dropdown item">
      菜单
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item" href="#">首页</a>
        <a class="item" href="#">产品</a>
        <a class="item" href="#">服务</a>
        <a class="item" href="#">关于</a>
      </div>
    </div>
  </div>
</div>

在上述代码中，我们把菜单放在了一个下拉式菜单中，当浏览器宽度超过 768px 时，原菜单会自动变为普通菜单，当浏览器宽度小于 768px 时，原菜单会隐藏，下拉式菜单会显现。

在 JavaScript 代码中，需要使用 $('.ui.menu').not('.ui.dropdown .menu .item, .ui.dropdown .menu').on('click', function() {...}) 来控制下拉菜单的显隐。

总结

Semantic-UI 菜单流体变化非常实用而且易于使用，为响应式布局的网站设计提供了便利。在使用菜单流体变化时，还需要注意菜单的层次结构、CSS 类的设置以及 JavaScript 代码的编写。始终记得为用户考虑，创造舒适的浏览体验。