Subnav Menu Horizontal com submenus

Subnav Menu Horizontal com submenus

 

Em outro artigo eu publiquei um modelo de Menu Horizontal Dropdown que funciona a base de puro CSS.

Neste tutorial, veremos um outro tipo de menu no estilo dropdown, que tem um efeito bastante interessante, que foi desenvolvido por Soh, do site SohTanaka.


Demo

Você pode conferir o demo original aqui.
Me pediram para explicar como instalar este menu no Blogger, então vamos lá:

1. Aplicar estilos CSS

Vá na aba "design", entre na edição HTML do seu template, não precisa clicar em "expandir modelos de widgets" 

e procure pela tag 

]]></b:skin>

e cole o seguinte código logo ACIMA dela:

/* Subnav Menu
------------------ */

/*-- container geral do menu--*/
ul#topnav {
margin: 0;
padding: 0;
float: left;
width: 100%;  /*-- se quiser edite a largura total do menu --*/
list-style: none;
position: relative;
font-size: 1.2em;   /*-- edite tamanho da fonte--*/
background: #000; /*-- edite cor de fundo--*/
}
/*-- itens das listas--*/
ul#topnav li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555; /*--edite borda--*/
}

/*-- links dos itens das listas --*/
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #fff; /*-- edite cor dos links --*/
text-decoration: none;
}
/*-- links dos itens das listas no modo hover --*/
ul#topnav li a:hover {
color:#ccc; /*-- edite cor dos links --*/
}

/*-- item da lista no modo hover--*/
ul#topnav li:hover {
background: #1376c9 ;   /*-- edite cor de fundo--*/

}


/*-- item da lista do submenu--*/
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:35px;
display: none;
width: 100%; 
background: #1376c9;  /*-- edite cor de fundo do submenu--*/
color: #fff;  /*-- edite cor dos links do submenu--*/
 /*--bordas arredondadas a direita--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
 /*--bordas arredondadas a esquerda--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}

/*-- item da lista do submenu no estado hover--*/
ul#topnav li:hover span {
display: block;
}

/*-- links do item da lista do submenu--*/
ul#topnav li span a {
display: inline;
color:#ccc; /*-- edite cor dos links do submenu --*/
}
/*-- links do item da lista do submenu no modo hover--*/
ul#topnav li span a:hover {
text-decoration: underline;
color:#000; /*-- edite cor dos links do submenu no estado hover --*/
}

Obs: Todos os trechos editáveis já estão identificados e destacados no código.

2. Instalar o arquivo Javascript-

Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela( linha destacada na cor azul no código)

Volte na aba "design >> editar html" 

e procure pela

tag </head>
e cole o seguinte código logo ABAIXO dela:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'

 type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

 $(&quot;ul#topnav li&quot;).hover(function() {
  $(this).css({ &#39;background&#39; : &#39;#1376c9 &#39;}); //Edite cor de 

fundo para o item da lista
  $(this).find("span").show(); //subnav
 } , function() { //on hover out...
  $(this).css({ 'background' : 'none'});
  $(this).find("span").hide();
 });

});
</script>

3. Inserir o código html

Agora você deve inserir o código html do menu para que ele fique visível no blog.

<ul id='topnav'>

<li><a href='seu-link-aqui'>Link 1</a></li>
  
<li><a href='seu-link-aqui'>Link 2 &#8595;</a>
       <!--Submenu inicio-->
        <span>
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a>
        </span>
        <!--Submenu fim-->
    </li>

<li><a href='seu-link-aqui'>Link 3 &#8595;</a>
       <!--Submenu inicio-->
        <span>
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a>
        </span>
        <!--Submenu fim-->
   </li>

<li><a href='seu-link-aqui'>Link 4 &#8595;</a>
       <!--Submenu inicio-->
        <span>
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a>
        </span>
        <!--Submenu fim-->
   </li>

<li><a href='seu-link-aqui'>Link 5</a></li>

</ul>

Agora é só editar os links e nome dos botões no menu, nos locais indicados.

Os trechos destacados na cor verde se referem aos item do submenu.
 
Caso queira adicionar mais links no submenu, basta repetir o código.

 
Os trechos destacados na cor azul se referem aos itens do menu principal.

 
Caso queira adicionar mais links, basta repetir o código.

Lembrando que: 

você deve tomar cuidado na quantidade de links que irá adicionar no menu, para evitar que ultrapasse a largura total do menu.

4. Escolher o local do menu

Escolha o local mais adequado para instalar o seu menu no template.
 
Se quiser colocar abaixo do cabeçalho, procure o trecho referente ao código do cabeçalho e cole o código html do menu logo após o final do código referente ao cabeçalho.
 
Se quiser que o menu fique acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.

Dica:
Se estiver usando algum modelo de template do "designer de modelo do blogger",a tag referente ao cabeçalho é: <header> .

Se estiver usando algum modelo do template minima, a tag referente ao cabeçalho é: 

<div id='header-wrapper'>

Se quiser, pode experimentar colar o código referente ao menu logo abaixo da tag:
 
<div id='content-wrapper'>


Não há como eu informar precisamente onde instalar o menu, a escolha do local deverá ficar por sua conta, até porque cada template é diferente um do outro.

Você pode editar as cores do seu menu, se quiser, para isto basta alterar os códigos referentes as cores no código da 1º parte deste tutorial.

fonte:
mundoblogger