侧边导航

优质

小牛编辑

146浏览

2023-12-01

这是一个滑动菜单。你可以增加一个下拉列表到你的侧边导航条通过使用可折叠组件。如果你想看一个示例。我们的侧边导航用于小屏幕。为了结合全屏导航，你需要拷贝两份 UL 代码。

HTML 结构

<ul id="slide-out" class="side-nav">
    <li><div class="userView">
<div class="background">
  <img src="https://www.xnip.cn/wp-content/uploads/2020/docimg2/office.jpg">
</div>
<a href="#!user"><img class="circle" src="https://www.xnip.cn/wp-content/uploads/2020/docimg2/yuna.jpg"></a>
<a href="#!name"><span class="white-text name">张三</span></a>
<a href="#!email"><span class="white-text email">jdandturk@sina.com</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>带图标的第一链接</a></li>
    <li><a href="#!">第二链接</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">子标题</a></li>
    <li><a class="waves-effect" href="#!">带波纹效果的第三链接</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

jQuery 插件初始化

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

选项

你可以定制侧边导航通过设置你自己的宽度和菜单的对齐方式。


  $('.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
draggable: true // Choose whether you can drag to open on touch screens
    }
  );

jQuery 插件方法

我们有方法使侧边导航显示和隐藏，你可以通过你的程序开控制侧边导航。


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

变量

这里有一些有用的变量和附加的元素，你可以添加到你的侧边栏。

下拉列表 HTML 结构

增加一个可折叠的菜单到你的导航条。

<ul id="slide-out" class="side-nav">
<li><a href="#!">第一导航链接</a></li>
<li><a href="#!">第二导航链接</a></li>
<li class="no-padding">
  <ul class="collapsible collapsible-accordion">
    <li>
      <a class="collapsible-header">下拉按钮<i class="material-icons">arrow_drop_down</i></a>
      <div class="collapsible-body">
        <ul>
          <li><a href="#!">一</a></li>
          <li><a href="#!">二</a></li>
          <li><a href="#!">三</a></li>
          <li><a href="#!">四</a></li>
        </ul>
      </div>
    </li>
  </ul>
</li>
    </ul>
    <ul class="right hide-on-med-and-down">
<li><a href="#!">第一导航链接</a></li>
<li><a href="#!">第二导航链接</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">下拉按钮<i class="material-icons right">arrow_drop_down</i></a></li>
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">一</a></li>
  <li><a href="#!">二</a></li>
  <li><a href="#!">三</a></li>
  <li><a href="#!">四</a></li>
</ul>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

全屏 HTML 结构

如果你想这个菜单占用屏幕的大小，你可以增加一个简单的帮助类 show-on-large 到这个 .button-collapse 类里面。


    <ul id="slide-out" class="side-nav">
<li><a href="#!">第一导航链接</a></li>
<li><a href="#!">第二导航链接</a></li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>

固定 HTML 结构

增加类 fixed 使侧边导航固定并且打开在大屏幕和隐藏在小屏幕。我们的导航在左边就像这个例子。

<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">第一导航链接</a></li>
<li><a href="#!">第二导航链接</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

如果你计划使用这个，你将不得不对你的内容使用一个侧边导航菜单的宽度的偏移量。将偏移量放在 header、main、footer 中。

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