Question

我的侧面导航应该加载折叠，并且还显示一个模态，如同这个小提琴：

相关代码： HTML：

    <header class="text-center">
</header>
<div class="main_container">

<nav class="indigo darken-4">
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center"><h1>code.partners near you</h1></a>
    <ul id="slide-out" class="side-nav fixed">
      <li class="bold"><a href="/auth/github" class="waves-effect waves-teal">Login with Github</a></li>
      <li class="bold"><a href="/marker" class="waves-effect waves-teal">Create a New Marker</a></li>
      <li class="bold"><a href="/logout" class="waves-effect waves-teal">Logout</a></li>
    <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
    </ul>
  </div>
</nav>

<main>
{{!-- <div class="container text-center"> --}}
  <div id="map_container">
  	<div id="map"></div>
      <div id="message_box">
      <ul id="messages"></ul>
        <div id="messageInputBox">
          <form action="">
            <input id="m" autocomplete="off" /><button>Send</button>
          </form>
        </div>
      </div>
    </div>
  </div>
{{!-- </div> --}}

</main>

和我的Javascript：

    $(document).ready(function(){
  console.log("interactive is linked and ready");

 // Initialize collapse button


  $(".button-collapse").sideNav({
      menuWidth: 240, // Default is 240
      edge: 'left', // Choose the horizontal origin
      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
    });
  // Initialize collapsible (uncomment the line below if you use the dropdown variation)
  //$('.collapsible').collapsible();


});//end document.ready

my Heroku页面： http://coding-partners.herokuapp.com/home

我的小提琴：https://jsfiddle.net/clwarnock/h7md1q3u/8/

我正试图让我的侧边导航更像小提琴：

开始折叠
打开时显示模态

为Danny Buonocore编辑

当视口调整到较小的设备尺寸时，没有汉堡包菜单可以再次打开它。我认为在某处我没有看到冲突。

Answer 1

侧边栏设计为在窗口足够大时自动展开。这称为responsive web design。如果您使浏览器变小，您将看到它不会在加载时扩展。

物化侧导航总是打开，不会加载折叠

1 个答案: