Suckerfish Multi-Level Menu CSS Generator

Este site é uma ajuda para programadores que querem fazer os famosos e extensamente utilizados menus drop-down, ou seja, aqueles menus que são expandidos ao clicar na seta apropriada. Basta configurar as diferentes opções para gerar o código e aplicar um menu mais estilizado onde você quiser.

Deixa que o Suckerfish faz o trabalho chato

Para começar, você pode escolher um design pré-feito. As opções incluem menus de diferentes cores, como vermelho, verde, rosa, azul e amarelo, além de estilos como berrylicious, mórbido, chiclete e até o padrão WordPress. A orientação do menu também pode ser definida em horizontal ou vertical.

Em seguida, você define as configurações dos itens superiores do menu, como imagem e cor de fundo (caso nenhuma imagem seja selecionada, apenas a cor de fundo é exibida), a cor da seta quando ativa, cor do texto (fixo ou quando “rolado” pelo menu), tipo e tamanho da fonte.

Já os itens inferiores do menu incluem cor de fundo (fixo ou quando “rolado” pelo menu), cor do texto (também quando “rolado”), tamanho e tipo da fonte.

Fazendo o código

Depois de definir o estilo do menu, basta enviar as configurações para que o Suckerfish desenvolva o código e o divulgue para você. Basta copiar o código e colá-lo em um arquivo CSS.

O código funcionará em qualquer lista com a identificação <ul id="suckerfishnav">.

Dicas

Algumas versões antigas do Internet Explorer podem não executar o menu corretamente. Para evitar este problema, você pode integrar o código “Suckerfish Javascript for Internet Explorer” ao seu site. Clique aqui para visualizar o complemento.

Para permitir que os usuários acessem o menu através do teclado, clique aqui e aplique o “Suckerfish Javascript for keyboard accessibility”.