TEMA: Menus
ARTIGO: Revisado
VERSÃO: WEBACAPPELLA 4
Fala turma do bem,, que calor que está aqui . Nem imaginem..
Hoje então vou disponibilizar um Menu bem bacana, espero que gostem.
Este menu fica bem legal se você centralizar verticalmente na primeira página, e dá um efeito bacana se o fundo do site for um slideshow.
Vamos lá.
Você necessitará editar alguns arquivos. Para isso sugiro o Notepad++, baixe-o gratuitamente clicando aqui.
Clique aqui e baixe os arquivos necessários.
Descompacte a o arquivo baixado em um local no seu equipamento.
CONFIGURANDO O MENU
Copie o código abaixo e cole em um documento em branco no notepad++
Passo 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://www.webacappellashow.com.br/templates/tatuador/css/style.css" type="text/css" media="screen"/>
</head>
<body>
<div class="content">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Sobre</span>
<span class="sdt_descr">Nossa história</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/2.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Catálogo</span>
<span class="sdt_descr">Tatuagens | Body Piercing</span>
</span>
</a>
<div class="sdt_box">
<a href="URL.html">Tatuagens Masculinas</a>
<a href="URL.html">Tatuagens Femininas</a>
<a href="URL.html">Body Piercing</a>
</div>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/3.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portifólio</span>
<span class="sdt_descr">Instagram</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/4.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Estúdio</span>
<span class="sdt_descr">Nosso local</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/5.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Artigos</span>
<span class="sdt_descr">Dicas | Curiosidades | Notícias</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/6.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Contato</span>
<span class="sdt_descr">Fale conosco</span>
</span>
</a>
<div class="sdt_box">
<a href="URL.html">Contato</a>
<a href="URL.html">Fanpage</a>
<a href="URL.html">Instagram</a>
</div>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://www.webacappellashow.com.br/templates/tatuador/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.webacappellashow.com.br/templates/tatuador/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
</body>
</html>
Passo 2
Substitua os trechos em vermelho pela url do seu domínio.
Exemplo:
Supomos que seu domíno seja www.meudominio.com.br
Então no trecho que esteja assim:
<link rel="stylesheet" href="http://www.webacappellashow.com.br/templates/tatuador/css/style.css"
vai ficar assim:
<link rel="stylesheet" href="http://www.meudominio.com.br/css/style.css"
Passo 3
Substitua os trechos em azul pelos seus títulos
Passo 4
Substitua as imagens na pasta upload/arquivos pelas suas imagens.
Sendo que a imagem 1.jpg é para a primeira opção, a 2 para segunda e assim por diante.
Passo 5
Substitua os trechos em verde pela url referente a cada opção
Passo 6
Agora copie todo o código já alterado no Notepad++ E N o Webacappella, na página que vai inserir o menu (pode ser numa matriz) , utilize da opção INSERIR>>CÓDIGO ,
Cole o código já alterado
PERSONALIZANDO O MENU
Irei passar as personalizações básicas, nada impede que você altere algo a mais se tiver experiência
Edite o arquivo style.css com o notepad++ que se localiza dentro da pasta CSS
Alterar a cor do título principal:
Linha 72: altere o valor da cor
Alterar a cor do subtítulo
Linha 78 : altere o valor da cor
Alterar a cor das sub-opções em estado normal
Linha 100: altere o valor da cor
Alterar a cor das sub-opções quando o mouse passa por cima
Linha 106: Altere o valor da cor
Salve o arquivo
HOSPEDANDO OS ARQUIVOS
Finalizando copie as pastas a seguir para o diretorio public_html de sua hospedagem
- CSS
- IMAGES
- JS
- UPLOAD
Agora só publicar o site e prontinho. Espero que gostem!!
