Como criar um menu drop-down (multinível) no Blogger

Atualizado em 26/06/2012 – subst. position: fixed; por position: absolute;

Menu drop-down, o que é?

Para organizar um blog que possui muitas categorias, páginas e sub-categorias, nada melhor do que criar um menu drop down para apresentar aos seus leitores uma lista com vários links de forma que aparecerão somente quando ativado, ou seja, quando alguém passar o mouse sobre ele.

Veja o menu em ação no nosso blog: http://visualmusicas.blogspot.com.br/

“Um menu drop-down é um elemento de interface com o usuário similar à uma lista, que permite que o usuário escolha um valor de uma lista de opções que "cai para baixo". Quando o menu drop-down está inativo, ele esconde as opções do menu, economizando espaço na tela. Quando ativado, ele mostra uma lista de opções que "cai", onde o usuário pode selecionar uma das opções para que o sistema possa interpretar a intenção do mesmo.” - http://pt.wikipedia.org/wiki/Menu_drop-down

Se você já tem um menu simples no seu blog (leia Como criar um menu simples na nova interface do Blogger) e quer substituir por esta nova ferramenta, siga o nosso tutorial a seguir…

Criando o menu drop-down no Blogger

Para criar o seu menu drop-down no seu blog, siga com bastante cuidado as etapas abaixo:

Atenção 1: Se você utiliza um template personalizado, esta dica poderá não funcionar, pois o seu blog já deve possuir um sistema próprio de menu…  Para verificar isso, crie um novo blog de teste utilizando o mesmo template do seu blog original e siga as instruções deste tutorial. Caso o menu funcione corretamente, acrescente-o no seu blog original…

Atenção 2: Antes de fazer qualquer modificação no modelo e nas páginas HTML, faça um backup completo primeiro, leia: Cuidados quando for editar seu modelo HTML no novo painel ...

Etapa 1 - Adicionar códigos CSS no painel do Blogger

Acesse o painel do Blogger www.blogger.com e faça o login…

Entre em [Modelo] e clique no botão [Personalizar].

No menu esquerdo, clique em [Avançado]. No menu ao lado, escolha [Adicionar CSS].

Copie o código abaixo:

/*----- CSS Drop Down Menu – Visual Dicas ----*/

#mbtnavbar {
    background: #060505;
    width: auto;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block; 
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
}

/*----- CSS Drop Down Menu - Visual Dicas ----*/

Cole o código no campo [Adicionar CSS personalizado] e clique no botão [Aplicar ao blog].

Agora clique no link [Visualizar blog]… Nada de diferente deverá acontecer com ele nesta fase… Se tudo ocorrer bem, clique no link [Voltar para o Blogger].

Etapa 2 – Criar e inserir o “gadget” do menu

No painel do Blogger, acesse [Layout] e clique em [Adicionar um Gadget].

Escolha [HTML/JavaScript].

Copie o código:

<div id='mbtnavbar'> 
      <ul id='mbtnav'> 
        <li> 
          <a href='LINK da Home'>Home</a> 
        </li> 
        <li> 
           <a href='LINK_2'>TITULO</a>
            <ul> 
                <li><a href='SUBLINK_1'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_2'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_3'>SUBTITULO</a></li> 
              </ul> 
        </li>
       <li> 
           <a href='LINK_2'>TITULO_2</a>
            <ul> 
                <li><a href='SUBLINK_1'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_2'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_3'>SUBTITULO</a></li> 
              </ul> 
        </li>
  <li> 
           <a href='LINK_3'>TITULO_3</a>
            <ul> 
                <li><a href='SUBLINK_1'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_2'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_3'>SUBTITULO</a></li> 
              </ul> 
        </li>
      </ul> 
    </div>

Cole no campo [Conteúdo] e o campo [Título] em branco. Clique no botão [Salvar].

Depois altere os campos marcados em negrito, conforme descrito na ETAPA 4.

Etapa 3 – Posicione o menu corretamente no blog

Visualize o blog agora. Verifique como ficou o layout e se desejar, posicione o menu no início da página, logo abaixo do cabeçalho.

Observe no nosso exemplo, que o novo menu esta posicionado na lateral do blog, onde iremos mudar a sua posição para o topo da página, abaixo do cabeçalho.

De novo no painel, acesse [Layout] e posicione o gadget do menu (HTML/JavaScript)logo abaixo do Cabeçalho… Clique no botão [Salvar organização].

ATENÇÃO: Se existir um outro menu no local, com o nome de Página, arraste-o para outra posição (na lateral, por exemplo), ou o exclua definitivamente.

Veja então como ficou o nosso exemplo… Veja que colocamos o gadget Páginas na lateral do blog neste momento.

Etapa 4 – Preencha os campos dos Títulos e Subtítulos

No painel do Blogger, volte para a edição do gadget em [Layout]. Com muita paciência e de acordo com a estrutura que você deseja inserir ao seu blog, altere os campos do código… Para adicionar mais títulos ou subtítulos é só seguir a ordem lógica do código.

Lembre-se que os menus do Blogger são manuais, e toda vez que você precisar adicionar um novo item, será necessário fazer a edição no gadget do menu…

No nosso exemplo vamos deixar o menu com 2 títulos: Biografia e Álbuns (veja o exemplo abaixo). Substitua os campos em negrito mostrados na Etapa 2 (links, títulos e subtítulo).

Nesta etapa, preste bem atenção e observe sempre se os links estão inseridos entre “aspas”, que pode ser aspas simples ( ‘  link  ‘ ) ou aspas dupla ( “ link  “).  Depois de substituídos todos os campos desejados, clique no botão [Salvar].

Exemplo (não copie):

<div id='mbtnavbar'> 
      <ul id='mbtnav'> 
        <li> 
          <a href='http://visualmusicas.blogspot.com.br/'>INÍCIO</a> 
        </li> 
        <li> <a href='http://visualmusicas.blogspot.com.br/p/artistas.html'>BIOGRAFIA</a>
            <ul> 
                <li><a href='http://visualmusicas.blogspot.com.br/2011/12/acdc.html'>AC/DC</a></li> 
                <li><a href='http://visualmusicas.blogspot.com.br/2012/02/black-sabbath.html'>Black Sabbath</a></li> 
                <li><a href='http://visualmusicas.blogspot.com.br/2010/08/deep-purple.html'>Deep Purple</a></li>
                <li><a
href='http://visualmusicas.blogspot.com.br/2009/07/led-zeppelin_19.html'>Led Zeppelin</a></li>
                <li><a
href='http://visualmusicas.blogspot.com.br/2011/06/who.html'>The Who</a></li>

                </ul> </li> 
       <li> <a href='http://visualmusicas.blogspot.com.br/p/artistas.html'>ÁLBUNS</a>
            <ul> 
                <li><a href='http://visualmusicas.blogspot.com/2011/12/albuns-acdc.html'>AC/DC</a></li> 
                <li><a href='http://visualmusicas.blogspot.com.br/2012/02/albuns-black-sabbath.html'>Black Sabbath</a></li> 
                <li><a href='http://visualmusicas.blogspot.com.br/2010/08/deep-purple.html'>Deep Purple</a></li>
                <li><a
href='http://visualmusicas.blogspot.com/2010/05/albuns-led-zeppelin.html'>Led Zeppelin</a></li>
                <li><a
href='http://visualmusicas.blogspot.com/2011/06/albuns-who.html'>The Who</a></li>
              </ul> </li>
      </ul>
</div>

Veja abaixo como ficou o exemplo:

Links para categorias ou marcadores

Para inserir itens como categorias (marcadores), por exemplo, insira links que possuem sempre a sequência:

http://Nome_do_seu_blog/search/label/Nome_da_categoria

Veja o exemplo abaixo da categoria Led Zeppelin do nosso blog de exemplo.

http://visualmusicas.blogspot.com.br/search/label/Led%20Zeppelin

Obs.: Substitua sempre o espaço (como no exemplo Led (espaço) Zeppelin), por %20, ficando o nome da categoria da seguinte forma: Led%20Zeppelin. Mantenha sempre as letras maiúsculas e minúsculas como definido o marcador (“case sensitive”).

Etapa 5 – Alterar cores do menu multinível

Para alterar as cores do menu, volte para o painel do Blogger e acesse [Modelo]. Depois clique no botão [Personalizar].

No menu esquerdo, clique em [Avançado]. No menu ao lado, escolha [Adicionar CSS].

• Alterar #060505 para mudar a cor de fundo do menu principal.
• Alterar #BF0100 para mudar o fundo de um guia sobre foco do mouse.
• Alterar #BF0100 para mudar a cor de fundo do menu drop-down.
• Alterar #060505 para mudar a cor de fundo de menu drop-down no mouse hover.

Veja aqui a Tabela de Cores

Depois de alterado, clique no botão [Aplicar ao blog].

No nosso exemplo, alteramos a cor do fundo de menu de #060505 para #4b4b4b, e veja como ficou abaixo. Faça os testes e deixe o menu da maneira que goste mais.

Excluindo o seu menu drop down

Se você  não gostou dos efeitos deste menu multinível, ou se ele não funcionou adequadamente, é bem simples excluí-lo. Basta entrar no painel do Blogger e excluir o gadget HTML/JavaScript que você criou em [Layout] e apagar o código CSS que você colou em [Modelo].

Caso isto não resolva, faça o upload dos backups que você fez  (Cuidados quando for editar seu modelo HTML no novo painel ...).

Teste o menu drop down em  todos os navegadores mais utilizados (Chrome, Firefox, IE e Opera). Nos meus testes o menu funciona bem em todos browsers, com alguns problemas no Internet Explorer 8.0 (no 9.0 funciona normal).

byALF 

---

Veja também:

Como inserir códigos CSS no Blogger

Aprenda a criar menus descolados para o seu site

Como criar um menu simples na nova interface do Blogger