31 maio 2019

Menu multinível responsivo para blog

Menu multinível responsivo para blogger

Desculpem pela demora de postagem, mas acabei me aborrecendo com a operadora Oi do Rio de Janeiro, por estar sempre caindo o sinal da internet ou pior, sempre ficar 2 a 3 dias sem nada de sinal. Quem mora aqui no Rio sabe muito bem do que estou falando. Por fim, encerrei o meu martilho e contratei outra operadora, vamos ver se agora vai. =/

Há muito tempo, algumas pessoas sempre perguntam se conheço ou se tem modelos de menus responsivos publicados aqui no Quero Dicas. Busquei em minhas postagens e percebi que, infelizmente, tenho somente uma postagem de menu responsivo compartilhado com vocês do antigo blog Prodeveloper.

Devido a essa falta de atenção, nessas duas semana iniciais de Junho, publicarei alguns modelos para vocês. Vamos ao primeiro.

Este modelo foi retirado site Codepen, um dos melhores sites para criar, compartilhar e aprender Javascript, CSS e HTML. Claro, fiz pequenas modificações para se adaptar ao blogger para facilitar a nossa vida. Veja o modelo aqui: Responsive Flat Horizontal Menu

Vamos lá adicionar este modelo ao seu template?

ANTES de começarmos....
Eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a blogs de teste! Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.

1. Agora que você já fez o backup ou preferiu instalá-lo em um blog de teste, Acesse ao blog de códigos e scripts do Quero Dicas. Deixe-o aberto.


2. Agora, vá no Painel de controle do blog que deseja instalar o menu e clique em Tema e depois em Editar HTML

3. Agora, clique dentro do HTML e em seguida tecle CTRL + F  para abrir a caixa de busca.

4. Procure por </head>. Assim que o encontrar cole o primeiro código logo ACIMA dele.

5. Agora procure por ]]></b:skin> e logo ACIMA dele cole o segundo código.

Atenção!
• Este menu está fixo, portanto, ele rola de acordo com a navegação do usuário.
• Para alterar as cores do menu original, mude somente o local que eu destaquei ao lado de cada item.

6. Para finalizar, agora procure por  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> e LOGO ABAIXO DELE, cole o terceiro código e salve.

Dica: Abra um espaço para colar o código copiado, dessa forma você poderá fazer alterações sem maiores problemas.

Pronto! Seu menu está visível e prontinho para adicionar nomes que deseja e seus respectivos links.


-- COMO EDITAR O MENU - Nomes e links -- 

• Caso você tenha alguma dificuldade para alterar os nomes e os links do menu, veja essa postagem:
Como colocar marcadores no menu do Blog

• Caso ainda tenha dificuldade na hora de adicionar os nomes e links devido a esse código, vou explicar melhor:

Note a primeira aba do menu:

<li><a class='homer' href='#'><i class='fa fa-home'/> HOME</a></li>

será onde você deve colocar o link

HOME é o nome que aparece na aba, resumindo o primeiro nome que aparece no menu. Você pode alterá-lo se quiser.

Já o destaque <i class='fa fa-home'/> é o ícone que aparece o lado do nome dessa aba. (Veremos mais a frente.)

2º exemplo:

<li><a href='#'><i class='fa fa-user'/> ABOUT</a>
 <ul class='sub-menu'>
   <li><a href='#'>Sub-Menu 1</a></li>
   <li><a href='#'>Sub-Menu 2</a></li>
   <li><a href='#'>Sub-Menu 3</a></li>
   <li><a href='#'>Sub-Menu 4</a></li>
   <li><a href='#'>Sub-Menu 5</a></li>
   </ul>
 </li>

O mesmo acontece neste segundo exemplo.

será onde você deve colocar o link

ABOUT é o nome que aparece na aba e <i class='fa fa-user'/>  é o ícone que aparece o lado do nome dessa aba. 

A única diferença neste caso é que no sub-menu, não há ícones. O mesmo se estende para os Sub Sub-Menu.

Entendeu? Espero que sim. =)


• Neste modelo a aba Home está com o background "ativado" ou fixo, se preferir. Caso você não queira desse jeito, basta trocar no CSS, desse jeito:

a.homer {
background: #9ca3da;

por 

a.homer {
background: transparent;




-- COMO EDITAR O MENU - Ícones --

• Para altera os ícones você deve acessar esse link: https://fontawesome.com/v4.7.0/icons/. Nesse site você encontrará diversos ícones que podem substituídos pelo que esta no menu.

Neste caso, escolha o ícone que desejar no site. depois clique sobre ele e em seguida uma página ira abrir. Logo você verá um código azul, copie ele e substitua pelo ícone do menu que deseja. Exemplo:

Você vai alterar 

<li><a href='#'><i class='fa fa-sitemap'/> SITEMAP</a></li>

por 

<li><a href='Seu link'><i class='fa fa-desktop'/> BLOG</a></li>

Entendeu? 

Você deve alterar pelo nome da fonte existente no site. NÃO ADIANTA colocar um nome inventado para aparecer um ícone "dele" e sim um nome verdadeiro que existe lá, por exemplo: Não adianta colocar fa fa-picole, pois não irá aparecer o ícone de picolé no lugar. ok?


--- ABA MULTINÍVEL ---


Para adicionar uma aba multinível (Sub menu e Sub Sub Menus), basta apagar a aba simples e adicionar uma copia de aba multinível no lugar.

Caso queira menos abas, basta exclui-las.

------------

Espero que tenham gostado. Qualquer dúvida deixe seus comentários. 
Claro, mesmo que tenha ficado tudo esclarecido, também comente! Adoro falar com vocês =D

Beijinhos

Nenhum comentário:

Postar um comentário

Amigos do Blog



Agregadores