Arquivos de Tag: Menu

Menu – Apple (CSS)

Gerador de Sprites CSS

Esse código replica o estilo de menu de navegação horizontal normalmente atribuído ao estilo da Apple. Inclui submenus. Para usar é muito simples:

  1. Insira o código 1 dentro do cabeçalho HEAD da página
  2. Coloque o código 2 onde desejar

Customize de acordo com suas necessidades, alterando os links, inserindo novas opções ou submenus.

Recomendo que salve a imagem original (http://www.uploadeimagem.net/upload/4723f62c.png) em seu próprio servidor, para manter a disponibilidade.

Leia Mais »

Efeitos de animação em menus com jQuery

O jQuery trouxe aos desenvolvedores diversas facilidades na hora de implementar interações client-side. Uma delas é a opção de criar animações, com uma simples função animate conseguimos obter belos efeitos visuais. Diria até que essa função é a melhor maneira de substituir o flash (pelo menos em menus). Pois menus em flash quebram o conceito de acessibilidade de qualquer site. O jquery acaba sendo a melhor opção de obter efeitos animados legais sem comprometer a acessibilidade. Essa é um efeito simples q movimenta o texto com a propriedade text-indent. XHTML: Inicio Portfolio Contato CSS: #animation-1 li{ width: 200px; } #animation-1 li a { display: block; padding: 10px 5px; width:190px; background-color: #ccc } jQuery: $(document).ready(function(){ $("#animation-1 li a").hover( function(){ $(this).animate({ textIndent: "30px" }, 500 ); },function(){ $(this).animate({ textIndent: "0px" }, 500 ); }); }); Como pode ver é bem simples, graças ao jQuery, abaixo temos o código completo com mais exemplos, segue em anexo também o codigo completo. Leia Mais »

Criando um menu overflow simples

Este script cria o efeito de overflow num menu (menu que pode ser escondido e mostrado). O segredo está na manipulação da propriedade display da div menu-magico-link. Você pode chamar a função menu_magico() também com o evento onmouseover. Leia Mais »

Classe para navegação por abas igual ao DotNet

É uma classe em javascript que simula o componente de abas (Tabs) do .NET. É fácil de usar e muito funciononal basta criar divs com o conteúdo que será adicionado na aba e informar para a classe o id da div e o título que irá aparecer na aba. Segue o exemplo completo no arquivo em anexo. Leia Mais »

Personalizar Menu Botão Direito do mouse

Este código permite ao programador personalizar o menu que é apresentado ao clicar no botão direito do mouse e ao invés das opções do navegador apresentar opções referentes ao conteúdo do site. Este menu pode ser fácilmente personalizado utilizando HTML, CSS e JavaScript. Leia Mais »