21/10/2015

Menu deslizante com Caixa jQuery e Css3


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

Posicione a área do código onde vai querer o menu.


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!!





0 comentários:

Postar um comentário

Olá pessoas do bem!!! Se gostou do post deixa um comentário. Os comentários é bom para aumentar a estima de quem ta postando. Valeu.

Related Posts Plugin for WordPress, Blogger...