实现侧边栏

Question

我正在制作一个角度的小演示，但首先我正在处理我的设计部分。 我正在使用 Materialize CSS。 这是我的代码：

    <nav class="blue z-depth-1">      
        <div class="nav-wrapper">
              <a  class="brand-logo " (click)="toggleSideBar()">
                   <i class="material-icons">menu</i> Demo
              </a>                 
        </div>
      </nav>
     <ul  id="slide-out" class="side-nav fixed z-depth-1 collapsible" data-collapsible="accordion">


       <li class="bold">
        <ul class="collapsible collapsible-accordion">

              <li class="bold">
                    <a class="collapsible-header  waves-effect waves-default">
                         <i class="material-icons prefix">dashboard</i>Dashboard</a>

              </li>
              <li class="bold">
                    <a class="collapsible-header  waves-effect waves-default">
                          <i class="material-icons">face</i>Employee Master
                    </a>
                    <div class="collapsible-body">
                    <ul>
                          <li><a href="badges.html">test</a></li>
                          <li><a href="buttons.html">test</a></li>
                          <li><a href="breadcrumbs.html">test</a></li>

                    </ul>
                   </div>
              </li>

      </ul>
      </li>

这是我面临的问题，请参考我的图片
Sidebar

Answer 1

首先感谢您发布 codepen。我已经完成了你的工作，并制作了自己的侧边栏导航演示，它可以按照你想要的方式工作。

我更改的内容如下所示。

1. 最新的materialize css和js版本https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css和https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js

2. 添加了一堆 css 让它看起来像你在参考链接中显示的那样

   // The overall padding of <a> tag changed .side-nav li>a{ padding: 0 15px; }

   // The padding between icon and text changed .side-nav li>a>i, .side-nav li>a>[class^="mdi-"], .side-nav li>a li>a>[class*="mdi-"], .side-nav li>a>i.material-icons{ margin: 0 15px 0 0; }

   // Alignment of collapsible list .side-nav .collapsible-body{ padding: 0 30px; }

提供了 HTML 代码，以及下面的 codepen 链接中的工作演示：

`http://codepen.io/nirajtech/pen/bWQMRE`

希望这能解决您的问题。