使用 ui-router 实现 CSS 移动菜单

Question

我正在尝试将 Materialise CSS http://materializecss.com/navbar.html 中的移动折叠导航栏与 UI 路由器一起使用。但是汉堡包？ (menu 3-stripe) 当我点击它时不会显示菜单 <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>.

有没有办法修改这个，这样我就可以把这个导航放在主页上，让 ui-router 只加载部分页面？

Answer 1

我遇到了同样的问题。为了解决这个问题，我按照这里的建议初始化 JQuery 插件：http://materializecss.com/side-nav.html#initialization

代码示例：

<script>
// Initialize collapse button
$(".button-collapse").sideNav();
</script>

<header>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" ui-sref="home" class="brand-logo">Mi Declaración</a>
      <!-- desktop -->
      <ul class="right hide-on-med-and-down">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="contact">Contáctanos</a></li>
      </ul>
      <!-- mobile -->
      <ul id="nav-mobile" class="side-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="contact">Contáctanos</a></li>
      </ul>
      <a href="" class="button-collapse" data-activates="nav-mobile">
        <i class="material-icons">menu</i>
      </a>
    </div>
  </nav>
</header>

使用 ui-router 实现 CSS 移动菜单

Materialize CSS mobile menu with ui-router

materialize

angularjs

angular-ui-router