O menu que eu me apaixonei: http://havingthemes.tumblr.com/spritemenuTutorial: http://havingthemes.tumblr.com/post/45732656453/veja-o-preview-do-menu-vou-tentar-ensinar-de-um
Veja o Preview do menu
Vou tentar ensinar de um jeito bem simples. Primeiro você faz as imagens no Photoshop, o menu completo bem alinhado.
Assim, um em baixo do outro, essa png possui, width: 97px;height: 74px, para fazer o efeito, use a metade do valor do Height, e no hover use a diferença, para que o menu suba (ou desça se preferir). Vamos os códigos.
No CSS, defina o lugar onde vai ficar o seu menu.
.sidebarmenu { top: 300px;margin-left: 70px; position: absolute ; z-index: 50px; height:auto; width:600px;}
Logo em seguida, faça os códigos do Menu e Transição. (vou fazer um exemplo com o esse Home)
#nav a.home {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/A05mjw1bf/home.png) no-repeat;-webkit-transition-duration: .50s;-moz-transition: 50s; -o-transition: 50s; display: inline-block; width: 97px;height: 35px; margin-left:-2px;}
#nav a.home:hover{background-position: -0px -39px;}
Observe que na id do menu home, usamos no height: 35px e no hover o que sobrou para 74, que é -39px.
o resto do menu, ficaria :
#nav a.ask {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/M8Nmjw1bm/inbox.png) no-repeat; display: inline-block; width: 95px;height: 35px;-webkit-transition-duration: .50s; -moz-transition: 50s; -o-transition: 50s; margin-left:16px;}
#nav a.ask:hover{background-position: -0px -39px;}
#nav a.themes {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/iacmjw1n7/themes.png) no-repeat; display: inline-block; width: 137px;height: 35px;-webkit-transition-duration: .50s;-moz-transition: 50s; -o-transition: 50s; margin-left:16px;}
#nav a.themes:hover{background-position: -0px -39px;}
#nav a.extras {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/aodmjw1q7/extras.png) no-repeat; display: inline-block; width: 124px;height: 35px;-webkit-transition-duration: .50s; -moz-transition: 50s; -o-transition: 50s; margin-left:16px;}
#nav a.extras:hover{background-position: -0px -39px;}
O depois de <body>, logo depois da sua id da page. Seu link para o menu, vai ficar assim.
<div class=’sidebarmenu’>
<div id=’nav’>
<a class="home" href="/"></a>
<a class="ask" href="#" span onClick="document.getElementById(‘liuc’) .innerHTML=document.getElementById(‘askht’).innerHTML" ></span></a>
<a class="themes" href="#" span onClick="document.getElementById(‘liuc’) .innerHTML=document.getElementById(‘themesht’).innerHTML" ></span></a>
<a class="extras" href="#" span onClick="document.getElementById(‘liuc’) .innerHTML=document.getElementById(‘extrasht’).innerHTML" ></span></a>
</div></div>
Ps: Onde tem o SPAN é o código do iframe.
Serviu, credite e de um like!
Beijos
(Bruna - http://endstonight.tumblr.com/)
Vou tentar ensinar de um jeito bem simples. Primeiro você faz as imagens no Photoshop, o menu completo bem alinhado.
Assim, um em baixo do outro, essa png possui, width: 97px;height: 74px, para fazer o efeito, use a metade do valor do Height, e no hover use a diferença, para que o menu suba (ou desça se preferir). Vamos os códigos.
No CSS, defina o lugar onde vai ficar o seu menu.
.sidebarmenu { top: 300px;margin-left: 70px; position: absolute ; z-index: 50px; height:auto; width:600px;}
Logo em seguida, faça os códigos do Menu e Transição. (vou fazer um exemplo com o esse Home)
#nav a.home {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/A05mjw1bf/home.png) no-repeat;-webkit-transition-duration: .50s;-moz-transition: 50s; -o-transition: 50s; display: inline-block; width: 97px;height: 35px; margin-left:-2px;}
#nav a.home:hover{background-position: -0px -39px;}
Observe que na id do menu home, usamos no height: 35px e no hover o que sobrou para 74, que é -39px.
o resto do menu, ficaria :
#nav a.ask {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/M8Nmjw1bm/inbox.png) no-repeat; display: inline-block; width: 95px;height: 35px;-webkit-transition-duration: .50s; -moz-transition: 50s; -o-transition: 50s; margin-left:16px;}
#nav a.ask:hover{background-position: -0px -39px;}
#nav a.themes {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/iacmjw1n7/themes.png) no-repeat; display: inline-block; width: 137px;height: 35px;-webkit-transition-duration: .50s;-moz-transition: 50s; -o-transition: 50s; margin-left:16px;}
#nav a.themes:hover{background-position: -0px -39px;}
#nav a.extras {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/aodmjw1q7/extras.png) no-repeat; display: inline-block; width: 124px;height: 35px;-webkit-transition-duration: .50s; -moz-transition: 50s; -o-transition: 50s; margin-left:16px;}
#nav a.extras:hover{background-position: -0px -39px;}
O depois de <body>, logo depois da sua id da page. Seu link para o menu, vai ficar assim.
<div class=’sidebarmenu’>
<div id=’nav’>
<a class="home" href="/"></a>
<a class="ask" href="#" span onClick="document.getElementById(‘liuc’) .innerHTML=document.getElementById(‘askht’).innerHTML" ></span></a>
<a class="themes" href="#" span onClick="document.getElementById(‘liuc’) .innerHTML=document.getElementById(‘themesht’).innerHTML" ></span></a>
<a class="extras" href="#" span onClick="document.getElementById(‘liuc’) .innerHTML=document.getElementById(‘extrasht’).innerHTML" ></span></a>
</div></div>
Ps: Onde tem o SPAN é o código do iframe.
Serviu, credite e de um like!
Beijos
(Bruna - http://endstonight.tumblr.com/)
Sobre você chupa chups muffin candy pie bonbon icing muffin cake chupa chups. Marshmallow danish tiramisu gingerbread jelly-o gummies applicake. Applicake pudding candy canes lollipop caramels ice cream pie lemon drops chupa chups. Topping icing cupcake applicake powder danish carrot cake candy canes. Powder wafer dessert. Biscuit biscuit applicake toffee jelly gingerbread biscuit.
