Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

Menu dropdown simples

Boa noite lindos, como vão? Muitas provas já? Confesso que em abril serão minhas provas do 1° bimestre e já estou de cabelo em pé porque eu leio, estudo e escuto o professor mas não entendo patavinas nenhuma =/ E pior de tudo é que cada vez mais vai ficando difícil e eu não sei como irei me sair lá frente. Mas nem quero colocar medo em vocês porque ainda é cedo haha deixa vocês passarem a fase do colegial primeiro dai vocês irão poder pensar na faculdade. É, vida de adulto não é fácil então aproveitem o agora pois é uma fase legal e bem especial.

Mudemos a página, hoje eu resolvi fazer um tutorial de um menu que irá ajudar muitas pessoas e é super necessário em blogs que necessitam de muitas abas para mostrar seus trabalhos ou por necessidade mesmo. Ajudei uma garota em seu blog e ela precisava de um menu dropdown que no caso é aqueles que quando você passa o mouse por cima além dos links já existentes ele mostra outros menus. Existem muitos sites ensinando a criar seus próprios menus dropdown mas não é tão simples pois a maioria está em inglês o que é um grande desafio por não entenderem o idioma e a explicação!

LIVE PREVIEW (**^-^)~

Para usá-lo vocês terão apenas que adicionar um gadget e colocar os códigos abaixo dentro:

<div style="position: absolute; margin-top: -60px;margin-bottom:0px; margin-left: 100px;z-index:1000;">
<style type="text/css">
#NavbarMenu {
background-color: #;
color: #000;
font-family: 'Oswald', sans-serif;
letter-spacing: 0px;
font-size: 18px;
text-transform: uppercase;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
display: block;
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background:#fff;
color: #000; /*--edite cor do link--*/
display: block;
font-family: 'Oswald';
letter-spacing: 0px;
font-size: 18px;
font-weight:300;
text-transform: uppercase;
margin: 0;padding: 9px 15px 8px;border-bottom: 1px solid #000;border-top: 1px solid #000;
}
#nav li a:hover, #nav li a:active {
color: #000; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
border-bottom: 1px solid #;border-top: 1px solid #;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #000; /*--cor do link--*/
font-size: 14px;
font-family: 'Oswald';
letter-spacing: 0px;
font-size: 18px;
font-weight:300;
text-transform: uppercase;
float: none;
margin: 0;
padding: 7px 10px;
background-color: #;
border-bottom: 1px solid #fff;border-top: 1px solid #fff;
}
#nav li li a:hover, #nav li li a:active {
color: #fff; /*--cor do link--*/
padding: 7px 10px;
background-color: #000;
border-bottom: 1px solid #fff;border-top: 1px solid #fff;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:
0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover
ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='endereço do blog'>Home</a></li>
<li><a href='endereço do blog'>nome</a></li>
<li><a href='endereço do blog'>nome</a></li>
<li><a href='endereço do blog'>nome</a></li>
<li><a href='endereço do blog'>nome</a></li>
<li><a href='endereço do blog'>Contato</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='endereço do blog'>Contato</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div></div>

Salve e veja se está tudo certinho, vocês podem modificar ele a vontade, como cores da fonte, do fundo e o fundo dos submenus. Crédito a ferramentas para blogs pela base do menu.

9 comentários:

  1. Olá :v ~boa tarde .-.~

    Ainda não, que droga viu, espero que se dê bem nas provas ~não quero colocar medo colocando medo kk~

    Adorei o menu super bonitinho e simples, dá pra fazer grandes edições nele ~adoro fazer uns paranauê~ É, a maioria dos sites tá em inglês e tem que pôr código ali, código lá, acabo até me perdendo ~sério~

    Talvez eu use num próximo layout ~~já que o outro que falei no outro post já tá pronto, e eu usei aquele tutorial pros afiliados mesmo :3~

    Kissu || Choco HTML, seu mundinho aleatório

    ResponderExcluir
  2. Muito simples esse menu e super lindo, adorei o tuto ^^

    Beijos { barbieseumundopink.blogspot.com.br }

    ResponderExcluir
  3. Minhas provas começam em abril também, mas já tive teste ç-ç é bem complicado mesmo, muitas vezes presto atenção e não entendo!
    Adorei o menu, ele é muito muito fofo, gosto de menus desse tipo <3

    crystal mermaid ☾ || goodies e afins

    ResponderExcluir
  4. Hello, sweetheart. ♥ Sim, essa semana passada mesmo tive duas de matemática e estou me preparando para outra no fim do mês e mais à frente de física... Céus, como eu odeio exatas! Sinto a mesma coisa que você à respeito dessas matérias, por mais que tente, NÃO ENTRA NA MINHA CABEÇA. Estou no último ano e a pressão para o ENEM e vestibulares está me matando, dá vontade de sair correndo. Haha!

    Poxa, meu sobrinho é blogueiro e se descabelou em busca de um modelo de menu drop down, mas todos que achávamos era um Deus nos acuda pra entender os códigos... Aí me vem você e nos entrega assim, tudo prontinho pra pôr no JavaScript. Haha! Muito bom.

    Carinhosamente, Jheni. [e m p i r e k.] & [ 1 5 o u t o n o s]

    ResponderExcluir
  5. Esse menu é bem prático, e facil de aplicar no blog. Gostei!

    Voltei com meu blog agora, será que você poderia passar lá? vai ajudar bastante.

    priincemodern.blogspot.com

    ResponderExcluir
  6. Oii ~^^~
    heguei aqui apenas agora, e tenho que dizer o quanto esse blog é DIWOSO, percebisece saBTS
    Achei esse menu bem prático, facil de se aplicar ao blog. Adorei!

    Meow!
    (UMA ARMY PASSOU POR AQUI)

    ResponderExcluir
  7. Olá Roh! o/ Eu já fiz algumas provinhas, mas ainda tem outras. Espero que se dê bem nas provas, e tente estudar que pode ajudar na hora. Que menu legal, vou usa-lo para o próximo layout <33 O tutorial está explicadinho, vai ser fácil aplicar no blog.

    Bye bye (^-^)//
    O Snack Cheese foi pra escola~| Clique aqui, e vá ao encontro do SC! (´ω`♡%)

    ResponderExcluir
  8. Olá Roh!Agora irá começar suas provas,apenas estude,tenha fé em si mesma e pense que todo seu esforço nos estudos não foram em vão , então ,apenas estude e foque nisso .

    Adorei o modelito do menu,bem este que estive procurando.

    href="http://hoechelin.blogspot.com/">Hoechelin { Blog novo }

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)