18 de mai de 2010

Menu deslizante com efeito

Que tal um menu com efeito deslizante de fácil instalação ? Gostou da idéia ?


 Basta copiar o código e colar no HTML/Javascript que fica em Elementos de página


De preferência hospede os scripts no Google Sites.

phototype.js
effects.js
sidebar.js




<script src="http://sites.google.com/site/menudeslizante/menudeslizante/prototype.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/menudeslizante/menudeslizante/effects.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/menudeslizante/menudeslizante/side-bar.js" type="text/javascript"></script>

<style>
body{font-size:75%;}
a{outline: none;}
a:active{outline: none;}
#sideBar{text-align:left; padding: 4px 0 4px 6px; border: 1px solid #fff;}
#sideBar h2{
padding: 4px 0 4px 6px;
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
color:#000; text-shadow:-2px -2px 3px #808080;
padding: 4px 0 4px 6px;
font-size:165%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0 10px 3px 3px;
padding:2px;
list-style-type:none;
display:block;
background-color:#808080;
border: 3px groove #ccc;
width:177px;
color:#FFFFFF;
text-shadow: 2px 3px 4px #000;
}
#sideBar li a:hover{
width:160px;
color: #000;
background-color:#ccc;
border: 3px ridge #ccc;
text-shadow: 2px 3px 4px #000;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding: 6px 0 6px 14px;}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 100px;
left:0px;
background: url('http://2.bp.blogspot.com/_FXIne2ZDJII/S_H5ZgzkWlI/AAAAAAAACeo/UBQEebJPlEU/s1600/cin.png') repeat;background-position:top right;}
#sideBarTab{background: url('http://2.bp.blogspot.com/_FXIne2ZDJII/S_H5ZgzkWlI/AAAAAAAACeo/UBQEebJPlEU/s1600/cin.png') repeat;
float:left;
height:137px;
width:28px;
}
#sideBarTab img{border:none;}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:360px;
}
#sideBarContentsInner{width:200px;}
</style>

<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2><span>Menu</span></h2>
<ul>
<li><a href="ENDEREÇO DO LINK 1">Link Um</a></li>
<li><a href="ENDEREÇO DO LINK 2">Link Dois</a></li>
<li><a href="ENDEREÇO DO LINK 3">Link Tres</a></li>
<li><a href="ENDEREÇO DO LINK 4">Link Quatro</a></li>
<li><a href="ENDEREÇO DO LINK 5">Link Cinco</a></li>
<li><a href="ENDEREÇO DO LINK 6">Link Seis</a></li>
<li><a href="ENDEREÇO DO LINK 7">Link Sete</a></li>
</ul>
</div>
</div>
<a id="sideBarTab" href="#">
<img alt="sideBar" src="http://4.bp.blogspot.com/_FXIne2ZDJII/S_H2Om2-0VI/AAAAAAAACeg/TEjloIath1g/s1600/menu.png" title="sideBar" /></a>
</div>


Veja o original AQUI e outro modelo AQUI

4 comentários:

  1. Amigona linda estou aqui para agradece-la e para lembra-la,que estou terminando o meu blog e aprendendo a usar a ferramenta pre-pal para te pagar um lanchinho.
    Você tem sido ótima mesmo nesses ultimos meses,para meu blog.
    Fica minha gratidão e qualquer coisa ...eu te aviso,porque se não der envio um lanchinho pelo cartão de credito da minha irmã!
    Beijao querida!

    ResponderExcluir
  2. gostaria de saber como colocar a coluna do blog deslizante, tipo acompanhando a medida que vc desce ou sobe a página

    ResponderExcluir
  3. Olá!
    EU amei esse tutorial!
    Mais eu queria saber de uma coisa, quando a gente vai no HTML do blogger e adiciona uma imagem na sidebar, essa imagem aparece no menu!
    Como eu faço para retirar?
    Obrigado!

    ResponderExcluir
  4. Olá Elke!
    Tudo bem?
    Estou precisando mesmo de ajuda e preciso que você responda esse comentário.

    Bem, eu utilizo apenas códigos do seu blog para personalizar o meu...
    Eu uso aquele código dos Widgets com efeito Accordion, mais, quando eu uso esse menu, dá incompatibilidade... Os gadgets não ficam mais com efeito accordion!

    O que eu faço para resolver esse problema de incompatibilidade? =((

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube