Updates +
Devido ao hiatus, não estamos moderando nem respondendo nenhum comentário, porém o blog continua aberto para visualização. Obrigada pela visita ♡

19 de fevereiro de 2013

Menu Lateral *código modificado*


Hérou my people °³° sim eu não morri ^^ me desculpem, como sempre dizem é na sétima serie que começam os esforços de verdade :c e todos que dizem isso tem mesmo razão -q, Seguinte minna, perceberam que eu coloquei de novo o menu lateral do V&C não é? Enfim, um humilde anon veio me pedir uma coisa que eu também percebi haha, Bianca dona do V&C não mostrou como mudar as cores do menu (background, background hover dos links, aquela faixinha que fica exposta no blog, enfim tudo) então, resolvi mudar um pouco o html do código do menu pra que vocês possam mexer nele mais facilmente °³° e deixando aqui estritamente claro, o menu não é meu, eu só quero ajudar quem não sabe bulhufas de nada dessas coisas
E pra quem se interessou em colocar o menu, pode clicar aqui pra ir pro tutorial original do V&C, como o menu não é meu, não acho que possa postar como faze-lo, na verdade até fiquei meio exitante em fazer esse post, mas não queria decepcionar o anon ^^

Bem, então, vou dar à vocês dois códigos, um com /*explicações nesses negócinhos lol*/, e o outro vai ser simplesmente o código do menu com as minhas cores, pra quem achou que o meu ficou legal mas não sabe quais são elas °³°

 Código modificado

/*MENU LATERAL*/
.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #COR/*cor da barrinha exposta vermelha do menu*/; background: #COR/*cor do background do menu*/; color: #; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out;  -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal;  z-index: 12345; }
.menuam:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.menuam a { border: none; background: #d62b44; color: #COR/*cor da fonte do menu*/; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }
.menuam a:hover { background: #COR/*cor do background do fundo da escrita em hover*/; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; }
.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }
.menuam a { padding: 4px 6px;
}

Se quiser que a letra continue da mesma cor substitua #COR em 'cor da fonte do menu' por #fff

Código do meu menu personalizado

/*MENU LATERAL*/
.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #97b6bd; background: #e2ebf2; color: #; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out;  -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal;  z-index: 12345; }
.menuam:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.menuam a { border: none; background: #fa90b5; color: #fff; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }
.menuam a:hover { background: #97b6bd; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; }
.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }
.menuam a { padding: 4px 6px;
}


Caso vocês achem que eu usei demais o conteúdo de outra pessoa por favor me avisem, .-. se for o caso eu até posso excluir esse post, só quis ajudar o meu cidadão anonimo ^^

Nenhum comentário:

Postar um comentário