Menu Com abas & sub menus

Menú com sub-menus - Para ver exemplo do menu com sub-menus acesse este link.
Vamos começar?

Primeiro Passo é: Adicionar o código CSS necessário.

Abra seu painel do Blogger, Layout - Editar Html, Sem que seja necessário expandir widget, Cole o código abaixo antes de: ]]></b:skin>:

Copíem

/* MENU DOS (Robs)----------------------------------------------- */ #subnavbar { background: #64343C; width: 873px; height: 27px; font-weight:bold; color: #FFFFFF; margin: 0px; padding: 0px; font-family:"Trebuchet MS"; }  #subnav { margin: 0px; padding: 0px; }  #subnav ul { float: left; list-style: none; margin: 0px; padding: 0px; }  #subnav li { list-style: none; margin: 0px; padding: 0px; }  #subnav li a, #subnav li a:link, #subnav li a:visited { color: #FFFFFF; display: block; font-size: 11px;     text-transform: uppercase;     margin: 0px 0px 0px 0px;     padding: 5px 10px 5px 10px;     border-left: 1px solid #FFFFFF;     }           #subnav li a:hover, #subnav li a:active {     background: #999999;     color: #000000;     display: block;     text-decoration: none;     margin: 0px 0px 0px 0px;     padding: 5px 10px 5px 10px;     }           #subnav li li a, #subnav li li a:link, #subnav li li a:visited {     background: #64343C;     width: 120px;     heigth: 20px     float: none;     margin: 0px;     padding: 5px 10px 5px 10px;     border-bottom: 1px solid #FFFFFF;           border-left: 1px solid #FFFFFF;     border-right: 1px solid #FFFFFF;     }           #subnav li li a:hover, #subnav li li a:active {     background: #999999;     margin: 0px;     padding: 5px 10px 5px 10px;     }           #subnav li {     float: left;     padding: 0px;     }           #subnav li ul {     z-index: 9999;     position: absolute;     left: -999em;     height: auto;     width: 160px;     margin: 0px;     padding: 0px;     }           #subnav li li {      }           #subnav li ul a {      width: 140px;     }           #subnav li ul a:hover, #subnav li ul a:active {      }           #subnav li ul ul {     margin: -25px 0 0 161px;     }           #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {     left: -999em;     }           #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {     left: auto;     }           #subnav li:hover, #subnav li.sfhover {      position: static;     }                                                                                   Personalizando seu menu.     Logo na primeira parte do código acima é onde você poderá modificar as cores e tamanhos.           #subnavbar {     background: #64343C;     width: 873px;     height: 27px;     font-weight:bold;     color: #FFFFFF;     margin: 0px;     padding: 0px;     font-family:"Trebuchet MS";     }

Personalizando seu menu.

Logo na primeira parte do código acima é onde você poderá modificar as cores e tamanhos.

#subnavbar {

background: #64343C;

width: 873px;

height: 27px;

font-weight:bold;

color: #FFFFFF;

margin: 0px;

padding: 0px;

font-family:"Trebuchet MS";

}

No exemplo acima a largura do menu está com 873px, Cuidado são exigidos no local da colocação deste.

Segundo Passo:

Clique em adicionar elemento de página e escolha Html/JavaScript. Coloque nele o código abaixo não esquecendo de colocar títulos e suas respectivas Urls.

Observação: Pestaña e sub-pestaña correspondem a Titulo e sub-titulo.

<div id="subnavbar"> <ul id="subnav">  <li><a href="URL do BLOG" title="Inicio">INICIO</a> </li>  <li><a href="URL do BLOG " title="">PESTAÑA1</a>  <ul> <li><a href="URL do BLOG " title="">SUB-PESTAÑA1</a>  </li>  <li><a href="URL do BLOG " title="">SUB-PESTAÑA1</a>  </li>  <li><a href="URL do BLOG " title="">SUB-PESTAÑA1</a>  </li>  </ul>  </li>  <li><a href="mailto:" title="E-mail ">CONTACTO</a>  </li> <li><a href="URL do BLOG" title="">PESTAÑA2</a>  <ul>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA2</a>  </li>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA2</a>  </li>  <li><a href=" URL do BLOG" title="">SUB-PESTAÑA2</a>  </li>  </ul>  </li>  <li><a href="URL do BLOG" title="">PESTAÑA3</a>  <ul>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA3</a>  </li>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA3</a>  </li>  </ul>  </li>  <li><a href="URL do BLOG" title="">PESTAÑA4</a>  <ul>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA4</a>  </li>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA4</a>  </li>  </ul>  </li>  <li><a href="URL do BLOG" title="">PESTAÑA5</a>  <ul>  <li =><a href="URL do BLOG" title="">SUB-PESTAÑA5</a>  </li>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA5</a>  </li>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA5</a>  </li>  <li><a href="URL do BLOG" title="">SUB-PESTAÑA5</a>  </li>  </ul>  </li></ul></div> _______________________ by Acessorios pra Blogs

Pronto.

Pages

Acessorios para Blogs

Menu Com abas & sub menus

Nauan

Nenhum comentário:

Postar um comentário

Últimos Comentários

Tags Populares

Postagens Populares