PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

30/11/2010

Aprenda a criar menus descolados para o seu site

 criando-menu-dropdown-apenas-com-html-e-css

Aprenda a criar menus descolados

Um menu (ou “lista de opções”), como todos sabem, é fundamental para a boa navegabilidade de sites ou blogs. (Leia o artigo: O menu é a tábua de salvação dos navegantes)

Um menu bem feito e com estilo pode dar um visual diferenciado ao layout de um site, servindo também como uma vitrine de opções…

Sem entrar no contexto da navegabilidade e da funcionalidade dos menus, iremos apresentar nesta dica um aplicativo gratuito que cria menus Horizontais, Verticais e em Drop Down com vários estilos que poderão ser adicionados no seu site.

O CSS MenuMaker é um serviço que oferece vários tipos de menus, onde o usuário cria  e faz o download do código HTML, código CSS e das imagens do menu. São vários tipos, cores e estilos para deixar qualquer webdesigner bem satisfeito.

Usando o CSS Menu Maker

Buddy

 

Acesse o site: www.cssmenumaker.com

 

image

Escolha o tipo de menu, clicando nos links [Drop Down], [Horizontal] ou [Vertical].

Como exemplo, usaremos menus Drop Down. Agora escolha o tipo de menu que deseja criar, clicando sobre a imagem…

image

Como exemplo, escolhemos o menu “Blue Dawn Drop Down”. Clique em [Customize]

image Para acrescentar os links do menu, clique em [Add Button]

image

Descreva o títulos dos botões e acrescente os links das páginas de destino. No nosso exemplo, utilizei “marcadores” do blogger e links externos…

Mas você poderá colocar qualquer link que desejar. É desejável você fazer um planejamento prévio da estrutura do seu site ou blog, para que o menu seja uma ferramenta eficiente na navegação…

Defina o “target”, se a página de destino abrirá na mesma janela [Same Window] ou em uma nova aba [New Window].

image Para acrescentar sub menus, clique no botão [+] ao lado do link desejado. Acrescente os links do sub menu. Veja o exemplo abaixo, onde criaremos um sub menu para o “Dicas para Blogs”…

image Agora clique em [Back to Main Menu] e crie outros submenus, caso desejar…

Clique em [Menu Preview] para visualizar o menu pronto.

image Se tudo estiver correto, clique no botão [Step 3: Download] e depois em [Download Now].

Como instalar o menu

Descompacte o arquivo .zip

image

A – Instalar em um Website hospedado

1- Através do FTP, faça o upload da pasta [Menu] para a raiz de onde está hospedado o site. (Leia: O que significa FTP e para que serve?)

2- Abra o arquivo [Installation_instruction.html] e copie o código HTML e cole no local desejado do seu site.

imageVeja o exemplo abaixo, onde foi inserido um módulo do menu do exemplo, apenas para efeito de teste (Portal Visual Dicas). Para visualizar, clique aqui: Teste do Menu CSS MenuMaker

image

Obs.: Se você tem conhecimento em HTML e CSS, ajuste as dimensões do menu para se adequarem ao seu site. Para isto é necessário alterar o código HTML e o arquivo menu_style.css que está dentro da pasta Menu.

B – Instalar o menu no Blogger

Para instalar o menu criado pelo CSS MenuMaker no seu blogger, siga as instruções apresentadas no link Como Instalar Menus do CSS Menu Maker no Blogger. Neste artigo, a autora mostra com muita propriedade todos os passos necessários para você colocar o menu que foi criado pelo aplicativo CSS MenuMaker em seu blog…

Bom trabalho…

8 comentários:

Marca Criação disse...

opa tudo bem irmao esse menu e muito bom mais nao conseguir instalar no meu site me ajuder coo faço ... msn charlesoliveiraporto@hotmail.com

Blog Folha Evangélica disse...

Ola não estou conseguindo instalar o menu,pois eles pedem que eu digite o meu e-mail para que eles possam mandar as instruções. não aparece p mim o passo 3

Anônimo disse...

Olá!
Já tive muito trabalhando tentando colocar um menu drop-down num outro blog que eu gerenciava. Hoje uso um menu horizontal no meu blog proPHano, do blogger mesmo. Mas vou tentar instalar um desses menus horizontais do CSSMaker.

http://prophano.blogspot.com/

Blog do Eu Sozinha disse...

No link do Mundo Blogger não há artigo explicando a instalação no Blogger. Não tem ou não encontrei. Tem o link direto?
Grata

byALF disse...

Olá blog do Eu Sozinha...

Tem link direto sim. Acesse Como Instalar Menus do CSS Menu Maker no Blogger

Obrigado pela informação...
Vou corrigir o nosso artigo, e adicionar o link correto.

Abraços,

Visual Dicas

Unknown disse...

Olá amigo!
Não consegui instalar o dropdown no meu blog:
http://conhecabonsnegocios.blogspot.com/
Vc poderia me informar detalhadamente como posso colocar?

byALF disse...

Olá Ademar,

Experimente seguir o tutorial: Como criar um menu drop-down (multinível) no Blogger

Visual Dicas

SÓ PENSA EM CORRER disse...

Vou fazer um teste depois, pelo que vi parece ser muito prático! Vaeu brow por essas dicas. Visite http://www.sopensaemcorrer.blogspot.com.br/

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics