Home Questions Themes Extras Tutorials
Menu Sidebar / Passa o mouse e ele aparece.

image

Para fazer esse menu, primeiro copie o código abaixo em qualquer lugar entre <style> e </style> do seu HTML.

 .sidebar { width: 180px; padding: 10px; height: 100%; border-right: 8px solid #COR DA BORDA da sidebar; background: #COR DO FUNDO; color: #COR DO TEXTO; 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; }
 .sidebar: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; } 
.sidebar a { border: none; background: #COR DO FUNDO dos links do menu; color: #COR DO TEXTO; 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 #4f4f4f; } 
.sidebar a:hover { background: #COR DO FUNDO DEPOIS QUE PASSA O MOUSE; -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; } 
.sidebar a { padding: 3px 5px; }
.sidebar a:first-child { margin-top: 10px; } .sidebar a:last-child { margin-bottom: 0px; }

Edite as cores onde pede, use a tabela de cores para isso.
Agora cole o código abaixo em qualquer lugar entre <body> e </body>, só tome cuidado pra não colar ele dentro de outra div, senão não vai dar certo. Os links variam se falso-iframe para links comuns.

<div class="sidebar">
<a rel="nofollow"><font style=" text-transform: none; font: italic 20px georgia;"><div align="right">TITULO DO MENU</div></font></a>
<p>
<a  href="URL DA PÁGINA" class="nav1">LINK 01</a>
<a  href="URL DA PÁGINA" class="nav1">LINK 02</a>
<span onClick="changeNavigation('01')"><div class="nav1">FALSO-IFRAME01</div></span>
<span onClick="changeNavigation('02')"><div class="nav1">FALSO-IFRAME02</div></span>
<br>
</div>

Tutorial por: Luana / YouMakeMeCrazierBaby
Obrigada: 01 / 02
Qualquer cópia do tutorial será denunciada sem aviso prévio.



Página 1 de 1