Skip to main content
tags editadas
Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Fonte Link
Felipe Henrique
  • 2,1mil
  • 3
  • 25
  • 54

Dropdown em menu vertical com bootstrap 4

Preciso fazer um menu vertical seguindo esse layout porem estou com dificuldades de fazer o menu abrir um dropdown estou usando bootstrap 4 segue meu código + a imagem do layout de como deve ficar. inserir a descrição da imagem aqui

HTML:

<div class="left">
        <div class="item active">
          <i class="fas material-icons">keyboard</i>
          <a href="#">teste</a>
          <ul class="list-unstyled drop">
            <li><a href="#">asdfasdfad</a></li>
          </ul>
        </div>
        <div class="item">
          <i class="fas material-icons">keyboard</i>
          <a href="#">teste</a>
        </div>
        <div class="item">
            <i class="fas material-icons">keyboard</i>
            <a href="#">teste</a>
        </div>
        <div class="item">
          <i class="fas material-icons">keyboard</i>
          <a href="#">teste</a>
        </div>
    </div>
    

SCSS:

.left {
    position: fixed;
    top: 50%;
    left: 15px;
    background: #337ab7;
    display: inline-block;
    white-space: nowrap;
    width: 50px;
    transition: width .5s;
}

.item:hover {
    background-color: #222;
    width: 250px;
}

.left .fas {
    margin: 15px;
    width: 20px;
    color: #fff;
}

i.fas {
    font-size: 17px;
    vertical-align: middle !important;
}

.item {
    height: 50px;
    overflow: hidden;
    a{
        color: #fff;
    }

    .drop{
        li{
            a{
                display: none;
            }
        }
    }
}

.item{
    a{
        &:hover{
            .drop{
                li{
                    a{
                        display: block;
                    }
                }
            }
        }
    }
}