导航



介绍

这是一个带有滑出效果的菜单。你可以在侧边栏上添加一个下拉效果通过使用collapsible组件。在小屏幕设备上就能看到其中的效果, 由于需要结合全屏导航,所以你必须使用两份同样的UL代码。

HTML Structure


  <nav>
    <ul class="right hide-on-med-and-down">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    <ul id="slide-out" class="side-nav">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
  </nav>
        

初始化


  // Initialize collapse button
  $(".button-collapse").sideNav();
  // Initialize collapsible (uncomment the line below if you use the dropdown variation)
  //$('.collapsible').collapsible();
        

选项

自定义sideNav的宽度。


  $('.button-collapse').sideNav({
    menuWidth: 300, // Default is 240
    edge: 'right', // Choose the horizontal origin
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
  );
        

调用方法

提供了一些方法能让你设定sidebar的显隐。


  // Show sideNav
  $('.button-collapse').sideNav('show');
  // Hide sideNav
  $('.button-collapse').sideNav('hide');
      

变换样式

Dropdown HTML结构


  <ul id="slide-out" class="side-nav">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
    <li class="no-padding">
  <ul class="collapsible collapsible-accordion">
  <li>
  <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
  <div class="collapsible-body">
  <ul>
    <li><a href="#!">First</a></li>
    <li><a href="#!">Second</a></li>
    <li><a href="#!">Third</a></li>
    <li><a href="#!">Fourth</a></li>
  </ul>
  </div>
  </li>
  </ul>
  </li>
  </ul>
  <ul class="right hide-on-med-and-down">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">First</a></li>
    <li><a href="#!">Second</a></li>
    <li><a href="#!">Third</a></li>
    <li><a href="#!">Fourth</a></li>
  </ul>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
        

全尺寸适配

如果你想要菜单在所有分辨率的手机上都能适配,在.button-collapse添加show-on-large


  <ul id="slide-out" class="side-nav">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
        

固定结构

在sideNav添加fixedclass能使其在相对大的屏幕上固定,在小屏幕上隐藏。


  <ul id="slide-out" class="side-nav fixed">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
        

用这个特性的话你需要设置主体内容的内边距。


  header, main, footer {
    padding-left: 240px;
  }

  @media only screen and (max-width : 992px) {
    header, main, footer {
      padding-left: 0;
    }
  }