实现侧边栏

Question

我正在做一个角度很小的演示，但首先我正在设计我的部分。 我正在使用Materialise 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. 最新Materialise的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` 

希望这能解决你的问题。