Menu simples Dropdown (com submenu)

outubro 02, 2017



Konnichiwa fadinhas e elfos! Como estão? Desculpe meu sumiço, ainda é pelo mesmo motivo, mas enfim, hoje resolvi trazer tutorial de html/css, como fazer um menu drop-down no blogger. Eu acho super útil e estou pensando seriamente em usar também. As vezes compartilhamos tantos temas nos nossos blogs e acaba não tendo espaço para adicionar tudo, mas com um menu assim fica super mais simples, eaí quer ver como faz? Let's go?
Menu:

Ele fica como esse menu acima. 
Para colocar ele no seu blog, você vai precisar ir em layout, adicionar um gadget javascript/html e nele colar o seguinte código:

<!--Start Navigation --> 
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="LINK1">HOME</a></li> 
<li><a href="LINK2">CATEGORIA</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORIA-1</a></li>
<li><a href='LINK4'>SUB-CATEGORIA-2</a></li>
</ul>
</li>
<li><a href="">CATEGORIA</a></li>
</ul>
</div>   
<!--End Navigation -->

Aonde estão nomeados ''Link'' adicione o link da sua categoria/tag . A primeira CATEGORIA , é a que está com submenus, então coloque o link de submenu em SUB-CATEGORIA-1 E SUB-CATEGORIA-2 , você pode adicionar mais se quiser, ou até mesmo mudar a ordem.
Lembrando que <li> são os links principais e o <ul> é sublinks .

Agora vamos personaliza-lo!
Vá em tema , editar html e procure por /b:skin , após encontra-lo cole acima dele o seguinte código:

/* Estilo do primeiro link do menu */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}
/* Estilo da barra de navegação geral */
.tabs-inner .widget ul {
background: #F8E6E0;
border: none;
text-align: center;
}
/* Estilo dos links individual*/
.tabs-inner .widget li a {
font: 12px Arvo;
border: none;
color: #ffffff;
}
/* Estilo dos links com hover */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #F8E6E0;
background-color: #ffffff;
text-decoration: none;
}
#navigationbar {
width: 100%; /* alterar a largura da barra de navegação */
height: 35px; /* alterar a altura da barra de navegação */
}
#navigationcss { 
margin: 0 auto;
padding: 0; 
}
#navigationcss ul { 
float: none; 
list-style: none; 
margin: 0; 
padding: 0; 
overflow: visible; 
}
#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #000; /* alterar a cor dos links principais */
display: block;
margin: 0;
padding: 10px 30px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}
#navigationcss li a:hover, #navigationcss li a:active {
color: #F8E6E0 ; /* altere a cor dos links quando está com mouse encima*/
margin: 0;
padding: 10px 30px; /* Certifique-se de que estes sejam os mesmos que a seção acima! */
}
#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #F8E6E0;  /* altere a cor de fundo da caixa suspensa */
width: 150px;
color: #000000; /* altere a cor dos links suspensos */
float: none;
margin: 0;
padding: 7px 10px; /* semelhante ao acima, altere o espaçamento em torno dos links */
}
#navigationcss li li a:hover, #navigationcss li li a:active {
background: #F8E6E0 ; /*altere a cor de fundo dos itens suspensos no hover*/
color: #fff; /* altere a cor dos links suspensos no hover */
padding: 7px 10px;  /*mantenha o mesmo que a seção acima */
}
#navigationcss li {
float: none; 
display: inline-block; 
list-style: none; 
margin: 0; 
padding: 0; 
}
#navigationcss li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 150px; 
margin: 0;
padding: 0;
}
#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul { 
left: auto; 

Você pode alterar tudo que quiser, está tudo explicado no proprio css para ajudar vocês.
Caso queira alterar as cores você vai precisar trocar por Hexadecimal (#'s) , para saber as cores , recomendo consultar esse site aqui Códigos de cores HTML INFO . E prontinho! Qualquer dúvida é só deixar nos comentários ok?

Resultado de imagem para gif witch anime

OFF: Viram que o blog está de aparência nova? Halloween chegandoo! Resolvi voltar com layouts temáticos, o que acharam? Falta terminar algumas coisinhas ainda hehe, e vou responder todos amanhã, fique de olho!

Por hoje é só, espero que tenham gostado do post! Me segue lá no instagram, as vezes posto stories x'D
Terá postagem toda segunda, quarta e sexta! Então segue o bloguinho e visite sempre! Até mais, Kissus! 

Leia também:

6 comentários

  1. Adorei a dica! Sempre vejo esse tipo de menu mas nem fazia ideia de como fazer... obrigada! O layout de Halloween ficou uma fofura <3

    Beijinhos
    tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou! <3 Sei como é, quando quiser colocar é só dar uma passadinha aqui agr hehe. Sério? *-* Obrigadaaa! <3 ~Kissus

      Excluir
  2. OMG!! Adoro o visual novo do blog <3 Está mesmo lindo!! *AmooHalloween*
    Obrigada por mais um tuto muito bem explicado e super util para nós <3

    beijinhos
    Rafaela Borges || KnightLand ❤

    ResponderExcluir
    Respostas
    1. Sério? Tá bem laranja kk' fico feliz que gostou! Também amo Halloween *0*
      DE nada, adoro ajudar <3 Kissus e obrigada pela visita!

      Excluir
  3. Oi Juju tudo bem? Espero que sim! Uoou o clima do blog já está em clima de halloween? Olha vou ser sincera eu gosto de terror mas tenho medinho de halloween. Sabe eu deixei de lado o instagram, não fosse por isso eu te seguia. Gosto da ideia de layouts temáticos. Agora falando do menu né, ficou lindo o menu. Também acho que seja útil para organizar o blog e tal. Beijinhos!
    Snack Cheese Fomos para Marte 👽 ~☆v i s i t e - n o s☆

    ResponderExcluir
    Respostas
    1. Oii, +/- mas to indo né kk
      Sim! Aaah mas são tão legais as temáticas de halloween <3 Acho que você falou, fez um do blog e apagou né? Tudo bem Iza ^.^ Awwn que bom que gostou e acha útil! Obrigada! E amei o layout novo do SC <3 KIssus

      Excluir

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.