Menu Deslizante com imagens em jQuery e CSS3

Neste tutorial vamos criar uma caixa única de navegação deslizante. A idéia é fazer uma caixa com o deslize para fora do menu item, enquanto uma miniatura aparece. Vamos também incluir uma caixa de sub-menu com outras ligações para alguns dos itens do menu.

Por | @oficinadanet Programação

Neste tutorial vamos criar uma caixa única de navegação deslizante. A idéia é fazer uma caixa com o deslize para fora do menu item, enquanto uma miniatura aparece. Vamos também incluir uma caixa de sub-menu com outras ligações para alguns dos itens do menu. O submenu irá deslizar para a esquerda ou para a direita dependendo de qual item de menu que estamos pairando.

Preview do resultado:


Veja o preview completo aqui


Nós estaremos usando o jQuery Easing Plugin (version 1.3) e algumas belas fotos por tibchris.

O HTML
Para a estrutura HTML que iremos utilizar uma lista não ordenada, onde cada item de menu irá conter o item principal elo de ligação e um elemento div para o submenu:

Se não houver um submenu, a div pode ser simplesmente deixado de fora. A imagem não será exibida no início, pois vamos definir sua largura e altura para 0 no CSS. Vamos dar uma olhada no estilo.


O CSS
Vamos começar pelo estilo da lista não-ordenada:
ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}


Queremos remover qualquer padrão text-decoration e esboço para todos os elementos link do nosso menu:
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
}


Os itens da lista estará flutuando à esquerda e tem a posição relativa, uma vez que vai querer usar o posicionamento absoluto para os elementos dentro. Se não teríamos que definir, absoluta elementos posicionados seria em relação à página inteira:
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}


O estilo para o elemento link principal, onde temos os nossos dois vãos para o título e descrição serão denominados da seguinte forma:
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
}


Observe o z-index: estaremos definindo uma ordem de empilhamento para todos os elementos importantes, para que as pessoas certas permanecer no topo. Estamos usando uma imagem de fundo que cria um copo como o efeito com um gradiente semi-transparente. Quando você usa um padrão de fundo (como a madeira na demo) ele cria um efeito bonito. Certifique-se de experimentar texturas diferentes - ele só parece incrível!

Você também pode jogar com as sombras - alterando os valores para 2px 2px 6px #000 inset lhe dará um efeito muito bonito.

A imagem será denominado como segue:
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}


Queremos animar a imagem para chegar no fundo, é por isso que a posição é absolutamente usando "bottom"(de baixo) como ponto de referência. Nós também adicionar um pouco de sombra caixa arrumado. Os dois primeiros valores são zero, tornando a sombra espalhar uniformemente ao redor da imagem. Usamos isso também no elemento link. Esta sombra pode até ser usado como um truque, sempre que você quiser criar um efeito de borda luz. A vantagem é que as sombras não estão realmente lá - você não precisa considerá-la em sua largura ou altura em cálculos elementos. A desvantagem é que CSS3 atual não é suportada no IE.

O wrapper para o título e descrição abrange terá este estilo:
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}


Se você tem alguns textos maiores, será necessário adaptar esses valores. Certifique-se que os valores se encaixam bem adaptados com os valores de animação no JavaScript, também.
Em seguida, nós definimos o estilo para a caixa cinza que desliza para baixo. Nós damos-lhe uma altura de 0 e posicioná-lo já de uma forma que só precisamos de aumentar a sua altura na animação:
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}


Os estilos comuns para o "spans" e links nas "boxes" será o seguinte:
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}


O título e a descrição será denominado como segue:
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px;
    font-size:10px;
    letter-spacing:1px;
}


A caixa de submenu será inicialmente escondida sob a caixa cinza. Nós, então, animá-lo para a direita ou para a esquerda, dependendo de onde estamos. Se, por exemplo, passar o último elemento, queremos animar essa caixa submenu para a esquerda, em todos os outros casos, nós queremos animá-lo para a direita.
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}


O primeiro link no submenu deve ter uma margem superior:
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}

E isso é todo o CSS! Vamos adicionar a magia do JQuery!


O JQUERY
Quando entramos com o mouse sobre um elemento da lista que ampliar a imagem, e mostrar ambos, abrangem todo o sdt_active ea extensão sdt_wrap. Se o elemento tem um submenu (sdt_box), então deslize-o para o lado. Se o elemento é o último no menu que deslize a caixa de submenu para a esquerda, caso contrário, à direita:
$(function() {
    $('#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);
    });
});


E é isso! Espero que tenham gostado deste menu muito estiloso e útil!

Resultado:

Veja o preview
completo aqui


slidedownboxmenu.zip

Mais sobre: jquery, css, menu
Share Tweet
DESTAQUESMais compartilhados
Comentários
AINDA NÃO SE INSCREVEU?

Vem ver os vídeos legais que
estamos produzindo no Youtube.