サイドバーをマテリアライズ

Question

私は角度の小さなデモを作っていますが、まず私は自分のデザインの部分に取り組んでいます。 マテリアライズ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投稿いただきありがとうございます私の画像をご参照ください直面しています問題です： はここに私のコードです。私はあなたの仕事を経験して、あなたが望むように動作するサイドバーのnavの自分のデモを作った。

私が変更したもののリストは以下の通りです。

1. 最新のマテリアライズの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. あなたが参照リンク

   // 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; }

   に示すようにそれが見えるようにCSSの束を追加しました// Alignment of collapsible list .side-nav .collapsible-body{ padding: 0 30px; }

HTMLコードは、以下のリンクcodepenでデモを働くとともに、提供されています

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

希望は、これはあなたの問題を解決します。