🥇 Navegação de estilo de histórias do Facebook

Então, não sei se você já visitou o Facebook Stories , é um site com um design fantástico e um ótimo menu, recomendo fortemente que você dê uma olhada. Gostei tanto do menu que decidi replicá-lo para um site em que trabalhei recentemente e deixe-me dizer – não é tão fácil quanto parece.

DEMO

Aqui está um pequeno tutorial mostrando como fazer algo semelhante.

1. Primeiro, alguns html simples

<nav role="navigation">
  <ul class="nav">
    <li><a data-target="nav__one">1</a></li>
    <li><a data-target="nav__two">2</a></li>
  </ul>
</nav>

<nav class="nav__sec nav__one">
  <ul>
    <li>1 Link 1</li>
  </ul>
</nav>


<nav class="nav__sec nav__two">
  <ul>
    <li>2 Link 1</li>
    <li>2 Link 2</li>
  </ul>
</nav>

<main role="main">
  Some content here
</main>

Portanto, a navegação no topo é a ‘navegação principal’ que você verá pela primeira vez quando chegar à página.
O segundo bloco <nav> é a navegação que você verá quando clicar no primeiro link ‘1’, observe como o data-target corresponde ao nome da classe. Esta mesma regra se aplica ao link ‘2’.

Como observação lateral, meu BEM pode estar muito errado, mas isso não é um grande problema.

2. Em seguida está o css que usei e recomendo que você apenas copie e cole.

body{
  padding:0;
  margin:0;
  font-size: 12px;
}

[role="navigation"] {
  background-color: #1f2429;
  color: #FFF;
  font-size:2.8em;
  height: 100%;
  width: 60px;
  z-index: 2;
  position: fixed;
}

.nav {
  list-style:none;
  padding:0;
  margin:0;
  line-height:60px;
}

.nav li {
  text-align:center;
  cursor: pointer;
}

.nav__sec {
  background-color: #2b323a;
  position: fixed;
  height: 100%;
  z-index: 1;
  color: #FFF;
  width: 250px;
  margin-left: -20.8em;
  overflow: auto;
}

.nav__sec.show {
  margin-left: 5em;
}

[role="main"] {
  margin-left: 70px;
  font-size: 1.5em;
  padding-top:1em;
}

.nav__sec {
  -webkit-transition: 0.3s; 
  transition: 0.3s;
}

3. Agora, aqui está a parte interessante, o Javascript (ou jQuery)

function clearAll() {
    $('.nav__sec').removeClass('show');
    $('.nav a').removeClass('show');            
};

$('main').click(function() {
    clearAll();
});

$('.nav a').click(function(){
    var n = $(this);
    var r = $("." + n.data("target"));

    if(n.hasClass("show")){
        n.removeClass('show'), r.removeClass('show');

    } else {
        clearAll(), n.addClass('show'), r.addClass('show');
    }

});

A clearAllfunção redefine a navegação para sua aparência padrão e isso acontece quando;

você clica no conteúdo que não é a navegação. Portanto, qualquer coisa em ‘Algum conteúdo aqui’. <br>
e brevemente quando você alterna entre os links ‘1’ e ‘2’ no painel de navegação principal.

A função de último clique no código tem duas variáveis ’n’ e ‘r’.

n = o link que foi clicado <br>
r = o valor de destino dos dados do link clicado

Portanto, a instrução if funciona da seguinte maneira; <br>

Se um link for clicado, verifique se ele tem a classe ‘ show ‘, se ele o remove do link e o atributo data-target com o mesmo nome de classe.
Se isso não acontecer – remova o show da classe de tudo (apenas no caso de você clicar em um link quando uma navegação já estiver aberta), então adicione o ‘ show ‘ ao link que acabou de ser clicado e seu alvo de dados correspondente. Muito inteligente hein?

Caso você não tenha notado no topo, aqui está a demonstração novamente.

DEMO

<br>

Conclusão

Parece bastante simples por escrito, mas eu gastei incontáveis horas tentando fazer isso funcionar e praticamente não funcionou sem a mágica do ‘data-target’. Espero ter economizado muito tempo para você, caso esteja planejando fazer um menu semelhante.

Se você tiver alguma dúvida, sinta-se à vontade para escrever um comentário abaixo.

Conclusão

Related Posts