#tab navigation

Um mês depois, consegui refazer meu pen de Navegação com Abas!

Agora o código é todo escrito por mim, sem partes que copiei de outros sites sem saber direito o que estava acontecendo.

Minha maior dificuldade foi associar as abas com seus respectivos conteúdos. Na versão anterior, as abas e conteúdos se relacionavam ordenadamente: a primeira aba abria o primeiro conteúdo, e assim por diante. Dessa vez, quis fazer com que cada aba se relacionasse com seu conteúdo sem a necessidade de estar em ordem. Além disso tive alguma dificuldade em acertar a ordem em que as coisas acontecem e só consegui destravar a hora que fiz uma listinha de tudo que precisava acontecer, para só depois escrever o código.

Consegui fazer as alterações de estilo todas no css, enquanto no javascript usei apenas classes diferentes para mostrar e ocultar o que eu quisesse.

Ainda acrescentei outra funcionalidade na versão mobile: agora, quando seleciono uma das abas ou clico fora do menu dropdown, o menu fecha novamente.

Segue a versão no codepen com cada linha comentada:

Usei como base o tutorial que encontrei no w3schools, pois não tinha certeza de por onde começar e como fazer cada aba encontrar seu respectivo conteúdo.

Em cima dele fiz algumas alterações: 1. Em vez de colocar o evento onclick no html, inline, fiz isso dentro do javascript. Isso quer dizer que precisei "encontrar" as abas de outra forma. Foi a primeira vez que usei o for, para encontrar cada uma das tabs e colocar o evento de clique em cada uma delas. Também foi a primeira vez que trabalhei com funções e ainda não entendi direito o espírito da coisa.

2. Precisava de uma versão mobile para as abas. Acabei transformando em um menu dropdown, com alguns "remendos" para se encaixar no layout idealizado pelo designer. Adicionei um botão que só aparece na versão mobile, que exibe qual aba está aberta e ao clicar nele, aparece o restante da lista de abas. Também ocultei a aba selecionada dessa lista, assim o nome dela só aparece no botão do menu dropdown.

O restante do código está como no tutorial. Quero fazer no futuro minha própria versão, pois não gostei de algumas coisas. O que mais me incomoda são as vezes que o css é alterado dentro do javascript. Acho que tudo fica mais limpo quando o css é alterado na folha de estilo. Também quero ver se consigo associar as abas com o conteúdo usando classes ou um atributo data.

Backstack.js is a jQuery plugin to create a dynamic bottom navigation (bottom tab bar) on the web app just like you've seen on mobile applications.

Demo

Download