0

estou tentando fazer um menu seguindo esse modelo aqui:

https://i.sstatic.net/jF0vn.jpg

Mas como nem tudo na vida são flores, eu não consigo de jeito nenhum deixar um border e o texto no meio, centralizado entre as bordas igual está ali.

Já tentei tudo que eu sei, dei uma pesquisadinha e nada. Alguém ai sabe como ajudar? Eu coloquei o código que tenho até agora no JSfiddle.

Outra coisa que me "bati" muito foi pra colocar outro item, mas lá no fundo da barra.

https://jsfiddle.net/c9upLkym/

4
  • No JsFiddle, o styles lincados não carregam, você deve coloca na área dedicada ao css, tudo que pode ser relevante pra questão ser resolvida. Aí podemos te ajudar. Commented 15/11/2015 às 19:23
  • @SamirBraga Boa tarde Samir, os styles do menu estão todos no JSfiddle. Os lincados são só o style da logo ( que não posso mesmo colocar) e os do Bootstrap que coloquei mas nem utilizei ainda.
    – LMaker
    Commented 15/11/2015 às 19:29
  • Boa tarde Luan, então deixa eu ver se entendi, você deseja deixa deixar seu menu igual ao dá imagem? Commented 15/11/2015 às 19:33
  • Seria algo parecido com isso Luan: jsfiddle.net/SamirChaves/c9upLkym/1? Commented 15/11/2015 às 19:52

1 Resposta 1

2

Pronto amigão...Corrigido. Adicionei algumas DIV's e mudei um pouco o CSS. Falta agora só adicionar os ICONES que vai ficar igual. Entenda que os itens do menu não estão centralizados, nesse exemplo que você mostrou, estão a esquerda, mas com os icones empurrando eles para a direita, dá essa falsa impressão de centralização.

<!-----------   Menu   --------------------->
<div id="sidemenu">
   <div id="menu-header"></div>
<div id="menu-parent">
<ul id="menu-itens">

    <li class="dashboard">
        <div>
        <div class="item-menu-icon"></div>
        <span class="item-menu-title">Dashboard</span>
        </div>    
    </li>

    <li class="lojistas">
        <div>
        <div class="item-menu-icon"></div>
        <span class="item-menu-title">Lojistas</span>
        </div>    
    </li>
    <li class="usuarios">
        <div>
        <div  id="item-menu-icon" class="glyphicon glyphicon-user"></div>
        <span class="item-menu-title">Usuarios</span>
        <div>
    </li>
    <li class="notificacao">
        <div>
        <div class="item-menu-icon"></div>
        <span class="item-menu-title">Notificacoes</span>
        </div>
    </li>
    <li class="relatorio">
        <div>
        <div id="item-menu-icon" class="glyphicon glyphicon-signal"></div>
        <span class="item-menu-title">Relatorios</span>
        </div>
    </li>
</ul>

Dashboard

CSS alterado

#menu-header {
    width: 199px;
    height: 99px;
    background: url('assets/logo_menu.png') center no-repeat;
    background-size: 210px 70px;
}

#menu-parent{
padding-left:20px;
padding-right:20px;
}


h3, h2 {
    font-size: 20px;
    color: #9B9B9B;
    margin: 25px;
    margin-left: 230px;
}

#menu-itens {
    margin: 35px auto;
    padding: 0px;
}

.item-menu-title {
    font-size: 14px;
    color: #9B9B9B;
    font-weight: 300;
}

.active .item-menu-title {
    color: #fff8ff
}

#menu-itens li {
    cursor: pointer;
    border-radius: 2px;
    display: block;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
    padding-bottom: 5px;
}

 #menu-itens li > div{
    border-bottom: 1px solid #9B9B9B;
    padding-top: 15px;
    padding-bottom: 15px
}

#menu-itens li:hover {
    background: rgba(0, 0, 0, 0.05)
}

#sidemenu {
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    height: auto;
    width: 185px;
    padding-right: 2.5px;
    padding-left: 2.5px;
    background: #f0415f;
    box-shadow: 6px 0px 10px #c4c4c4;
}

header {
    width: 100%;
    height: 50px;
    background: #dcddde;
    border-top: 3px solid #CCC;

}
.glyphicon {
    font-size: 30px;
}

Exemplo: Menu atualizado

1
  • Valeu amigo, eu preciso dar uma estuda afundo em CSS haha. Valeu mesmo!
    – LMaker
    Commented 17/11/2015 às 16:06

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 .