Pular para o conteúdo principal

Postagens

Mostrando postagens com o rótulo tutorialSubnav

Pesquisar

aprenda como se faz: "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 {f…

tutorial, menu drop down

Tutorial, menu drop down


"Aprenda como instalar um Menu Drop Down no seu template/blog. "    "Aprenda como  instalar

    um

    "Menu Drop Down "

    no seu template/blog.  "

   O  Menu Drop Down,     é aquele que quando passamos o mouse em cima de um determinado button  do menu, logo abaixo dele, se abrem diversos sub-menus.


     Antes de começar,  é aconselhável que se "Salve" o seu template , para que caso  ocorram problemas, você tenha uma cópia de seu template original guardado em seu PC.
    Jamais deixe de fazer um backup do seu Template para evitar determinados problemas...





          Então, Logado em seu painel blogger, ...clique em:... design... ...editar HTML... ...expandir modelos de widgets...

Primeiro passo:
 Procure por: ]]></b:skin>

encontrado-o,
COLE ,antes de

]]></b:skin>

o código abaixo:


/* Menu em Abas CSSTabs
--------------------------- */
#csstabs {
height: 280px;  / * altura total da área * /
margin:0 auto;
position:…

contato

Nome

E-mail *

Mensagem *

Google+ Followers

buscas populares …apareça nas buscas… cadastre seu web site aqui…/buscas populares…alô negócios !!!…