Menus Vanessa S.
Menu com Imagens em Efeito Persiana
A biblioteca MooTools permite vários efeitos interessantes que podem ser aplicados em galerias de imagens, por exemplo.
Um dos efeitos mais atrativos que achei foi o Efeito persiana, que aplicado em imagens, podemos criar um menu bem diferente, como este na imagem abaixo:
Para a criação deste menu é necessário a inclusão de 3 arquivos javascript.
1º Passo – Download dos arquivos javascript:
Faça download dos arquivos javascript necessários para utilização deste efeito:
? MooTools
? ImageMenu
? MooTools.V1.11
2º Passo – Hospedar os arquivos javascript:
Após download dos arquivos javascripts nos links acima, hospede em seu próprio site de hospedagem favorito. Veja relação com opções de Sites para hospedagem de arquivos javascript.
3º Passo – Inserir código javascript no HTML do seu Template:
Acesse o menu “modelo”, entre na edição HTML do seu template, e procure pela tag </head>
e cole logo ACIMA dela:
<script src='url-do-arquivo-mootools'></script>
<script src='url-do-arquivo-imageMenu' type='text/javascript'></script>
<script src='url-do-arquivo-mootools.v1.11' type='text/javascript'></script>
<script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script> A parte destacada em negrito é o local que você deverá substituir com a url de seus arquivos hospedados.
4º Passo – Aplicar estilos CSS:
Volte no menu “modelo”, entre na edição HTML do seu template, e procure pela tag ]]></b:skin>
e cole logo ACIMA dela:
/*----- Images menu -----*/
#kwick {
width:660px; /* edite largura*/
height:200px;
overflow:hidden;
position:relative;
padding:0;
margin:0pt auto;
}
#kwick ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
display:block;
width:1000px;
height:200px;
padding:0;
margin:0px;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 110px;
/*padding: 10px;*/
background: #000;
/*border-right: 5px solid #000;*/
border-right: 2px solid #000;
}
#kwick .kwick span {
display: none;
}
#kwick .opt1 {
outline: 0;
background: #000000 url(endereço-da-sua-imagem) ;
}
#kwick .opt2 {
outline: 0;
background: #000000 url(endereço-da-sua-imagem);
}
#kwick .opt3 {
outline: 0;
background: #000000 url(endereço-da-sua-imagem);
}
#kwick .opt4 {
outline: 0;
background: #000000 url(endereço-da-sua-imagem);
}
#kwick .opt5 {
outline: 0;
background: #000000 url(endereço-da-sua-imagem);
border-right:1;
}
#kwick .opt6{
outline: 0; background: #000000 url(endereço-da-sua-imagem); border-right: 1;
}
Onde está marcado “endereço-da-sua-imagem” é o local que você deverá inserir os endereços das imagens que irão aparecer no menu.
Em #kwick {width:660px; -> se refere a largura total do menu, altere de acordo com as medidas do seu template.
Em #kwick .kwick -> você poderá alterar a espessura ou cor da borda que separa uma imagem da outra.
5º Passo – Escolher o local que ficará o menu:
Agora escolha o local onde quer posicionar o seu menu.
Um excelente local para instalar este slide é na coluna que fica logo abaixo do cabeçalho, (ou do gadget páginas).
Antes de mais nada, você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget nesta área, através do menu “layout”.
Se não houver um campo para “Adicionar Gadget” abaixo do cabeçalho, você terá que fazer algumas modificações no código do template.
Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho
Vá no menu “layout, e no campo abaixo do gadget “páginas”, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:
<div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" href="seu-link-aqui"></a></li>
<li><a class="kwick opt2" href="seu-link-aqui"></a></li>
<li><a class="kwick opt3" href="seu-link-aqui"></a></li>
<li><a class="kwick opt4" href="seu-link-aqui"></a></li>
<li><a class="kwick opt5" href="seu-link-aqui"></a></li>
<li><a class="kwick opt6" href="seu-link-aqui"></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
</script>
Para um melhor funcionamento deste menu, é recomendado que você utilize todas as imagens nos mesmos tamanhos: 320x200
[alerta]Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Antes de adicionar este menu, devo alertar que você deve verificar se já tem instalado algum outro script que funcione a base do JQuery, ou Prototype. Caso tenha, se instalar este menu, poderá ter problemas com os demais scripts, visto que Prototype ,JQuery e MooTools sempre entram em conflito, portanto, faça uma avaliação de quais realmente são mais necessários.
Para melhor entendimento, leia: Por que alguns scripts não funcionam no meu blog.[/alerta]
Cara muito massa esse tutorial, segui tudo e consegui, o menu aparece as imagens e todo, sendo que elas nao deslizam, e ja refiz os passos varias vezes, tem como solucionar isso?
obg!
No final do artigo tem uma nota falando sobre script. Leia o artigo.
não sei pq mas nao aparece nada quando coloco no meu blog…
ja repeti tudo varias vezes!
ola clau estou com um blog de testes e tentei colocar esse menu achei muito interessante, mas aqui no meu template ele nao passa de 660 px de largura. Ja que vc citou que a funcionalidade deste script pode variar de acordo com o template, a pergunta issu pode ser do meu template?
Obrigado
Têm como deixar esse menu na vertical?
Valew Clau, Muito bom!!
Deu certo agora… Muito obrigado. Se quiser entrar no meu blog pra ver o resultado é: http://www.discoladuh.blogspot.com
Binho0Marques
Eu atualizei a explicação do 5º passo para facilitar o entendimento. Tente novamente.
Eu só gostaria de saber se esse slide é aplicavel no Designer do modelo… pois não tem o código do 5º passo
Binho0Marques
Não tenho como saber o q aconteceu com seu template. Pode ser que tenha ocorrido conflito de javascript, ou vc não seguiu todos os passos direitinho. Para cada caso é um caso, não tenho como te ajudar.
Clau… consegui colocar e tudo mais, o problema é que as imagens não se mechem como se fosse persianas… O broblema é que o meu e no Designer do modelo… Tem como deixar o mesmo efeito?
Bruno Costa
Não tenho como saber o q aconteceu com seu template,não posso te ajudar.
Diego Almeida
Eu até editei o post para que o pessoal cole o js acima de /head mesmo, pq pelo jeito a maioria só tá conseguindo instalar o js colando nesse trecho.
Q bom que vc consegui, e obrigada pelo comentário.
vlw Clau
essa solução de colocar os "JS" antes do "head" deu certo pra mim.
Ótimo blog o seu!
Clau tem algum template que com certeza funciona este efeito?
Porque ja tentei em uns 3 templates e não consegui fazer funioncar 🙁
Olá, eu já coloquei no meu blog, e ficou muito fixe…
Só tem um problema, desde a segunda imagem até à ultima, tem um tracejado por cima. Sabe-me dizer porque?
Obrigado
:.kendownload:.
Tenta colocar o arquivo js acima de </head> e vê o q acontece.
Clau meu template nao aceita de jeito nenhum o primeiro codigo que possui o endereço dos arquivos JS acima do ]]skin da este erro:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The reference to entity "d" must end with the ';' delimiter.
Quando coloca ese mesmo codigo acima do ]]skin funciona, porém as persianas nao mexem :s
o que faço para resilver? por favor
Lucas Hb:
Procure no menu, o indice: "Tutoriais Blogger" o tutorial que vc quer é o "efeito shadowbox em imagens e videos".
Nesse menu estão listados todos os tutoriais que já publiquei aqui no GD, procure sempre dar uma pesquisada lá para ver se tem o q vc procura.
clau, fui ver suas imagens, e quando se clica nelas elas abrem na mesma pàgina,eu acho que è como um menuzinho,e tem a opção de passar pra frente e pra tràs. tem esse tutorial? obg!
@Thays:
E pq suas imagens devem ter ultrapassado o tamanho de 320×200.
@www.webpublicdesiner.blogspot.com:
Experimente hospedar suas imagens em outro site, como o Picasaweb por exemplo.
olá.
por favor as minhas imagens não aparece, por favor me
ajude…
obs as imagens estão postadas no google sites do
webpublicdesigner.
obrigado..
as minhas imagens nao aparece, ficam oclutas no
webpublicdesigner.blogspot.com.
por favor e ajude
Att: claudinei
Oiie, queria muito usar esse script! Mas quando eu passo o mouse em cima das imagens, ela não abre por completo, fica faltando um pedaço pra abrir, você sabe me dizer o que eu posso fazer pra arrumar? Muito Obrigada, beijos;*
sem problemas, instalarei assim mesmo, sabe o que faco, participarei da promocao, e ganherei um template novinho em folha, vlw…
@PCD e cia:
Este menu funciona a base de scripts e acredito eu que só possam ser utilizados na horizontal. Infelizmente, vou ficar te devendo.
Ola, adorei este menu, mas como faco para coloca-lo na vertical, entende, ja que o modelo dado esta na horizontal.
Adoro o blog/site, ele me ajuda desde que criei o meu, me ajuda mesmo. Parabens!!!!
@JCT Digit@l:
Se seu site aceita arquivos javascript, css e html normalmente, acredito que dê pra vc fazer o mesmo procedimento que está no tutorial, a única diferença, é q o código do passo nº5 vc vai colar no local onde quer q o menu fique.
como faço para colocá-lo no site ao invés de colocá-lo no blog?