Menu Sprite (utilizando jQuery)

Tutorial HTML, CSS e Javascript

O sprite menu é, nada mais nada menos, a realização de umas configurações básicas de CSS que faz um menu "interativo" facilmente ser aceito em todos os navegadores, além de ficar bonito e da maneira que você quer, já que não há variações de fontes, gradientes feitos por CSS etc que poderiam ser incompatíveis com outros navegadores (como o internet explorer).

O menu sprite é perfeito porque é fruto de uma única imagem! O efeito de transição de CSS3 e animação do jQuery são apenas complementos que faz o menu ficar agradável e diferente aos nossos olhos, dando um efeito de transição "giratória" e em cascata quando o mouse passa em cima do link dos menus.

Veja também...

Almoço no Las Nenas Café Bistrô (Goiânia)
Londres: Fim de tarde em Notting Hill e primeira vez na Starbucks
As ilustrações de Renata Soares

7 Comentário(s)

(7 pelo blog e pelo facebook)
  • Laura
    08 . 02 . 2015

    Ana, eu amei esse menu, achei um pouquinho complicada a parte do photoshop, mas nada que com prática não resolva. Será que você não poderia fazer um tutorial sobre como fazer um menu drop down que fique centralizado, e se possível que vá rolando com a página? Beijos.

    Responder

    • Aninha
      Visitar blog
      11 . 02 . 2015

      Oi @Laura, eu preciso atualizar este tutorial pois ele está bem antiguinho! Eu fiz um tutorial de menu totalmente com CSS e jQuery (sem photoshop) fique à vontade para dar uma olhada :D

      Responder

      • Araceli Lima
        Visitar blog
        14 . 02 . 2017

        Olá Ana tdo bem?? Baixei o template free que você disponibilizou só que não estou conseguindo linkar as minhas redes sociais.
        Será que você pode ver o que esta acontecendo, abaixo do Perfil. não sei onde entro para fazer o link. Aguardo Obrigada

        Responder

        • Aninha
          Visitar blog
          15 . 02 . 2017

          Araceli, você precisa acessar o seu perfil em Usuários > Meu perfil. Lá no final da página terá o lugar para você cadastrar os seus links.

        • Araceli Lima
          Visitar blog
          16 . 02 . 2017

          Bom já fui lá mais a hora que acesso a rede, volta para meu blog!

        • Aninha
          Visitar blog
          16 . 02 . 2017

          Araceli, é preciso colocar o link completo do seu perfil, com http://www

  • jao
    Visitar blog
    10 . 12 . 2014

    obg mto bom :)

    Responder