Pular para o conteúdo principal

Postagens

Mostrando postagens com o rótulo como

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…

Saiba como é feito:"Menu Horizontal DropDown"

Menu Horizontal DropDown


...instalar um Menu Drop Down no seu blog.



Para quem não sabe, Menu Drop Down, é aquele que quando passamos o mouse em cima de um determinado botão do menu, logo abaixo dele, se abrem varios sub-menus.


DEMO.

Lembre-se: Salve o seu template antes de começar.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.


1º passo: Aplicar estilos ao seu Menu Drop Down:Vá em design >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o 
antes de
]]></b:skin>

/* NavbarMenu--------------------------- */#NavbarMenu {background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);width: 100%;height: 35px;font-size: 12px;font-family: Arial, Tahoma, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;text-transform: capitalize;}#NavbarMenuleft {width: 100%;float: left;margin: 0;padding: 0;}#nav {margin: 0;padding: 0;}#nav ul {float: left;list-style: none;margin: …

contato

Nome

E-mail *

Mensagem *

Google+ Followers

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