Skip to main content
removeu 129 caracteres do conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

Anderson, encontreiEncontrei a solução. Tive que fazer algumas modificações e utilizar a classe "panel"panel nas tags 'li'li da minha sidebarsidebar.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul id="accordion1" class="nav navbar-nav side-nav">
                <li class="panel">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#acc-dashboard">
                        <i class="fa fa-window-restore sb-icon text-center"></i><span class="sb-span">Dashboards</span>
                        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
                    <ul id="acc-dashboard" class="collapse">
                        <li class="nav-item-1">
                            <a href="#"><span class="sb-span">Entregas</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="sb-span">Mesas</span></a>
                        </li>
                    </ul>
                </li>
                <li class="panel">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#acc-financeiro">
                        <i class="fa fa-dollar sb-icon text-center"></i><span class="sb-span">Financeiro</span>
                        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
                    <ul id="acc-financeiro" class="collapse">
                        <li>
                            <a href="#"><span class="sb-span">Contas a receber</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="sb-span">Contas a pagar</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

Anderson, encontrei a solução. Tive que fazer algumas modificações e utilizar a classe "panel" nas tags 'li' da minha sidebar.

<div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul id="accordion1" class="nav navbar-nav side-nav">
                <li class="panel">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#acc-dashboard">
                        <i class="fa fa-window-restore sb-icon text-center"></i><span class="sb-span">Dashboards</span>
                        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
                    <ul id="acc-dashboard" class="collapse">
                        <li class="nav-item-1">
                            <a href="#"><span class="sb-span">Entregas</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="sb-span">Mesas</span></a>
                        </li>
                    </ul>
                </li>
                <li class="panel">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#acc-financeiro">
                        <i class="fa fa-dollar sb-icon text-center"></i><span class="sb-span">Financeiro</span>
                        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
                    <ul id="acc-financeiro" class="collapse">
                        <li>
                            <a href="#"><span class="sb-span">Contas a receber</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="sb-span">Contas a pagar</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

Encontrei a solução. Tive que fazer algumas modificações e utilizar a classe panel nas tags li da minha sidebar.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="accordion1" class="nav navbar-nav side-nav">
    <li class="panel">
      <a data-toggle="collapse" data-parent="#accordion1" href="#acc-dashboard">
        <i class="fa fa-window-restore sb-icon text-center"></i><span class="sb-span">Dashboards</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-dashboard" class="collapse">
        <li class="nav-item-1">
          <a href="#"><span class="sb-span">Entregas</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Mesas</span></a>
        </li>
      </ul>
    </li>
    <li class="panel">
      <a data-toggle="collapse" data-parent="#accordion1" href="#acc-financeiro">
        <i class="fa fa-dollar sb-icon text-center"></i><span class="sb-span">Financeiro</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-financeiro" class="collapse">
        <li>
          <a href="#"><span class="sb-span">Contas a receber</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Contas a pagar</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>
Fonte Link
fnx
  • 83
  • 8

Anderson, encontrei a solução. Tive que fazer algumas modificações e utilizar a classe "panel" nas tags 'li' da minha sidebar.

Ficou basicamente assim:

<div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul id="accordion1" class="nav navbar-nav side-nav">
                <li class="panel">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#acc-dashboard">
                        <i class="fa fa-window-restore sb-icon text-center"></i><span class="sb-span">Dashboards</span>
                        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
                    <ul id="acc-dashboard" class="collapse">
                        <li class="nav-item-1">
                            <a href="#"><span class="sb-span">Entregas</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="sb-span">Mesas</span></a>
                        </li>
                    </ul>
                </li>
                <li class="panel">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#acc-financeiro">
                        <i class="fa fa-dollar sb-icon text-center"></i><span class="sb-span">Financeiro</span>
                        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
                    <ul id="acc-financeiro" class="collapse">
                        <li>
                            <a href="#"><span class="sb-span">Contas a receber</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="sb-span">Contas a pagar</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>