[Tutorial] criar menu CSS, vertical e horizontal

Por Jorge Sampaio quarta-feira, novembro 3

Embeleze o seu site/blog criando menus em CSS (Cascading Style Sheet) utilizando um programa gratuito, o CSS Tab Designer.

O programa possui dezenas de menus prontos a usar, com a vantagem que podem ser alterados recorrendo a programação CSS.

Os menus “exemplo” do programa vão de encontro com as necessidades da maioria dos programadores, tendo ao seu dispor:

  • Menus Verticais;
  • Menus Horizontais.

Exemplos de Menus que poderá criar:

criar menu css vertical horizontal

Faça o download do programa aqui → CSS Tab Designer (se o download não iniciar, faça o download aqui).

Após proceder a instalação execute o CSS Tab Designer. Na coluna central, encontrará todos os menus “exemplo” à sua disposição. Para tornar a criação do menu mais rápida, pode carregar no botão “Fill with examples”, para que o programa gere um menu com hiperligações de exemplo. Pode alterar posteriormente as hiperligações recorrendo à programação.

Por fim, clique em “Generate HTML & Images” e guarde num directório à sua escolha.


O programa cria automaticamente os arquivos e código HTML necessários para o seu menu.

Agora, basta fazer o upload das imagens para um servidor (Tinypic, Photobucket, etc), abrir o documento HTML criado pelo CSS Tab Designer com o bloco de notas e colar o código gerado no seu site/blog.

Como referido, o menu é totalmente personalizável, para mudar a cor basta alterar os códigos de cor em “color”, “background”. Para alterar as dimensões mude os parâmetros “width” e “height”. Caso o corpo do menu seja construído através de imagens, basta alterar a tonalidade da mesma recorrendo a um editor de imagens, como o The Gimp (grátis).

1 1 Comentário " [Tutorial] criar menu CSS, vertical e horizontal "

Marilucia 4 de novembro de 2010 às 00:18

Ótima dica, gostei outro dia me perguntaram como fazer isso. Gostaria que desse um exemplo, assim não conheço mto a linguagem, em que linha do código colocar, essas coisas.

Abraços!