Menu de Tags Separadas por Categorias


Olá! Trouxe um tutorial bem legal para organizar as tags ou qualquer lista de links que desejar. Trata-se de um menu com opções separadas em categorias definidas por você, no qual ao clicar, os itens referentes a uma categoria se destacam dos demais. Parece complicado, mas não é, e aprendi isso no Codrops; vou usar ícones encontrados no Flaticon (lá tem um montão de ícones de todos os tipos) e coloridos por mim para exemplificar.
Menu sem os ícones de lista

Esse será o resultado, mais ou menos, porque dependendo de como personaliza suas listas, não aparece esse coração ao lado ou o ícone de lista (clique nos textos para ver o que ocorre):

Caso gostem e queiram usar, estes são os ícones para tags:


Agora sim, os códigos; cole isso antes de </b:skin>:
 @import url(http://fonts.googleapis.com/css?family=Gabriela);
.ff-container{/*area geral*/
    width: 700px;
    margin: 10px auto 30px auto;
}
.ff-container label{/*titulos das categorias*/
    font-family: 'Gabriela', serif;
    width: 25%;
    height: 30px;
    cursor: pointer;
    color: #fcc;
    text-shadow: 1px 2px 3px #fff;
    line-height: 33px;
    font-size: 19px;
    float:left;
}
.ff-container label.ff-label-type-all{
    border: none;
}
.ff-container label.ff-label-type-3{
    border: none;
}
/*categoria todos*/
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{
    color: #fa6d92;
    text-shadow: 1px 2px 3px #fee;
    text-align: center;
}
.ff-container input{
    display: none;
}
.ff-items{
    position: relative;
    margin: 0px auto;
    padding-top: 20px;
list-style: none;
}
.ff-items a{
    display: block;
    position: relative;
    padding: 10px;
    background: #fff;
    margin: 4px;
    width: 160px;
    height: 120px;
}
.ff-items a span{
display: block;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ff-items a:hover span{
    height: 80px;
    opacity: 1;
}
.ff-items li img{
    display: block;
}
.ff-items li{
    margin: 0px;
    float: left;
    opacity: 0;
    width: 188px;
    height: 148px;
    transition: opacity 0.6s ease-in-out;
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li,
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{
    opacity: 1;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){
    opacity: 0.1;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{
    display: none;
} 

Visualize e salve, só para ver se não mudou nada no seu template. Para aparecer o menu, cole o código abaixo no HTML de uma página ou gadget (acho melhor em uma página):
 <section class="ff-container">
   
    <input checked="checked" class="ff-selector-type-all" id="select-type-all" name="radio-set-1" type="radio" />
    <label class="ff-label-type-all" for="select-type-all">Todos</label>
    
    <input class="ff-selector-type-1" id="select-type-1" name="radio-set-1" type="radio" />
    <label class="ff-label-type-1" for="select-type-1">Categoria 1</label>
    
    <input class="ff-selector-type-2" id="select-type-2" name="radio-set-1" type="radio" />
    <label class="ff-label-type-2" for="select-type-2">Categoria 2</label>
    
    <input class="ff-selector-type-3" id="select-type-3" name="radio-set-1" type="radio" />
    <label class="ff-label-type-3" for="select-type-3">Categoria 3</label>
    
    <div class="clr">
</div>
<ul class="ff-items">
<li class="ff-item-type-2">
      <a href="URL-DE-1-LINK">
       <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />
      </a>
</li>
<li class="ff-item-type-2">
      <a href="URL-DE-1-LINK">
<img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />
</a>
     </li>
<li class="ff-item-type-1">
      <a href="URL-DE-1-LINK">
       <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />
      </a>
     </li>
<li class="ff-item-type-1">
      <a href="URL-DE-1-LINK">
       <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />
      </a>
     </li>
<li class="ff-item-type-3">
      <a href="URL-DE-1-LINK">
       <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />
      </a>
     </li>
<li class="ff-item-type-3">
      <a href="URL-DE-1-LINK">
       <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />
      </a>
     </li>
</ul>
</section> 

Vamos entender:
Mude os títulos Todos, Categoria 1,2,3...para os que desejar, por exemplo, se você postar sobre Moda e Beleza, adicione esse título; já que está após Todos, no HTML será representada por ff-item-type-1; aí você quer organizar suas tags sobre coisas fofas, que pode chamar-se Kawaii nas categorias, que por sua vez será representada no HTML por ff-item-type-2...
Isso significa que os links e URLs das imagens devem ser adicionados de acordo com as categorias, tipo:
<li class="ff-item-type-1"> => posts sobre moda
<a href="URL-DE-1-LINK"> =>link do marcador/tag que fala sobre moda
<img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />=> ícone referente a esse marcador
</a>
</li>
<li class="ff-item-type-2"> =>posts que falam sobre coisas fofas
<a href="URL-DE-1-LINK"> =>link do marcador/tag que fala sobre fofura
<img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />=> ícone referente a esse marcador
</a>
</li>
E assim por diante. Para ficar mais claro, vou mostrar trechos de como fiz o menu de exemplo; começando com a tag Games, ícone de joystick, que ficou na categoria Para Você, item-type-1:
<li class="ff-item-type-1">
<a href="http://reinokawaii.blogspot.com.br/search/label/Kawaii%20Games">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzMnjTmUXz6Ip48db25ZY3AmVLP4tmBTjnGFEfKEzAs7iy_LdODSWyrjkG2hiX7I66NKhFwj6WBqqRHzaRdVIIsCfnvf9h02EJnOVMGDntaUtZeXxo9Y7UQDjncPhEPmxMqEwTYpE2NM/s1600/joystick10.png" title="Games"/>
</a>
</li>
A tag Unhas, com ícone de esmalte, ficou em Moda e Beleza, item-type-2:
<li class="ff-item-type-2">
<a href="http://reinokawaii.blogspot.com.br/search/label/Unhas">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7e9WgVRyHqeSlrPnn51OSAHdzcYvmsbq6qQN4P-Q2t_V5naFlV5Etk_-B_1vj3yOQcvxFlGqkRXOHBCAoFxykjT4fzvaockJfnP3YXnOmthihxbWjVh10zJh8ucaCleO5Ux9USf9OAnw/s1600/lacquer.png" title="Unhas">
</a>
</li>
E a tag Favoritos, com ícone de pasta de favoritos, ficou em Kawaii, item-type-3:
<li class="ff-item-type-3">
<a href="http://reinokawaii.blogspot.com.br/search/label/Favoritos">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCryltpKLTDP6YH0sd2HNw31QZ4pAet9gM6y0byw8V5pzBev3yOSYbAxmSUHCJfewFZdaBe0VugJcTbllXl8DS2XnAXJLgVHS3PSEH-9TAA6vu1pL93wnRwH8XLj39W29EnSn3_ijV0qM/s1600/favorite.png">
</a>
</li>
A categoria Todos fica organizada após você acrescentar ícones e links. Espero que gostem.






Postar um comentário

8 Comentários

  1. Oh Globs! Que coisa mais bunita de lindja *ooo*
    Só uma coisa... Tem um código pra colocar na caixinha de scripts no layout? É que eu morro de medo de bugar o site colocando código assim, no CSS '-' E depois eu não consigo tirar xD
    E outra coisa: Você quem fez esse código? *¬*
    Sem mais comentários. Vou acabar me empolgando e escrevendo demais xD

    tesourosaovento.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada :3
      Eu apenas personalizei o código, os créditos vão para o Codrops, link no início do post.
      Não entendi bem a primeira pergunta; você quer saber se há uma forma de usar em seu modelo essa caixa de código com função copiar? Se for isso, chama-se syntax highlighter, farei um post sobre isso posteriormente.
      Quanto a remover um código, é desfazer ou apagar o que colou no HTML do seu modelo, ou testar em um blog de testes, que é o que faço, porque aí se der erro, não acontece nada em seu blog oficial :) Os códigos desse post são só CSS e HTML, sem script.
      Bju e obrigada :D

      Excluir
    2. Ah, tindi. A primeira pergunta foi se dava pra colocar em script pela própria página de edição de layout do blog. É mais fácil pra desastrada aqui testar xD

      Excluir
    3. Dá sim...se for colocar em uma página, cole na opção HTML:
      <*style*>
      Primeiro Código
      <*/style*>
      Retire os asteriscos *...aí cole o Segundo Código logo abaixo e personalize.
      Ou então cole o primeiro código em Modelo - Personalizar -vai abrir o Designer de Modelo do Blogger; clique em Avançado, vá até Adicionar CSS e cole. Clique em Aplicar ao Blog.
      Pronto! Agora é só usar o segundo código na página ou onde quiser que o menu apareça no seu blog.
      Fique a vontade para perguntar sempre que quiser ok :3
      Bju...

      Excluir
  2. muitos fofos Roberta,a cada dia que passa,me impressiona com seus tutoriais,um blog,bem bonito,arrumado,está recomendado no meu blog e estou te seguindo

    ResponderExcluir
    Respostas
    1. Muito obrigada :3 Fico muito contente com sua presença <3
      Bjim.

      Excluir
  3. Ai que amor seu blog, Roberta! Aqui é tudo TÃO FOFO! *o*
    Adorei os ícones, super lindos. <3

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up