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。我已经完成了你的工作并制作了我自己的侧边栏导航演示，它可以按你想要的方式工作。

我更改的内容列表如下所示。

最新的物化css和js版本https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js和// The overall padding of <a> tag changed .side-nav li>a{ padding: 0 15px; }
添加了一堆css，使其看起来像您在参考链接
中显示的那样
// 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; }

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

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

position:relative

希望这能解决你的问题。

实现侧栏

1 个答案: