1

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

1 Resposta 1

1

Para fazer o drop vc pode usar position:absolute, assim vc tira esse submenu do flow e ele não interfere nos outros elementos ao redor.

inserir a descrição da imagem aqui

Segue o código da imagem acima:

.left {
    position: fixed;
    top: 50%;
    left: 15px;
    background: #337ab7;
    display: inline-block;
    white-space: nowrap;
    width: 50px;
    transition: width 0.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; */
}

.item a {
    color: #fff;
}

.item .drop li a {
    /* display: none; */
}

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

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

.item {
    position: relative;
}

.item > a {
    display: none;
}

.item:hover > a {
    display: initial;
}

.drop {
    margin-left: 50px;
    position: absolute;
    background: black;
    display: none;
    z-index: 2;
}

.item:hover .drop {
    display: block;
    width: calc(100% - 50px);
    padding-inline-start: 0;
    list-style: none;
}
<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>
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
            <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>
        <ul class="list-unstyled drop">
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
        </ul>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .