實現側邊欄

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` 

希望這能解決你的問題。