Facebook Stories Style Navigation

So I don't know if you've ever visited the Facebook Stories it's a fantastically designed site with a great menu I highly recommend you checking it out. I liked the menu so much that I decided to replicate it for a site I recently worked on and let me tell you – it's not as easy as it looks.

DEMO

Here's a little tutorial showing you how to do a similar thing.

1.First some simple html

<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>

So the navigation at the top is the 'main navigation' that you'll first see when you land on the page.
The second <nav> block is the navigation you'll see when you click on the first link '1', notice how the data-target matches with the name of the class. This same rule applies to link '2'.

As a side note my BEM might be a big wrong but that isn't a massive issue.

2.Next is the css I used which I recommend you just copy and paste.

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.Now here's the juicy bit, the Javascript (or 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');
    }

});

The clearAll function resets the navigation to it's default look and this happens when;

• you click on content which isn't the navigation. So anything in 'Some content here'. <br>
• and briefly when you switch between links '1' and '2' on the main nav.

The last click function in the code has two variables 'n' and 'r'.

n = the link that's clicked <br>
r = the data-target value of the link clicked

Therefore the if statement works as follows; <br>

• If a link is clicked, check to see if it has the class 'show', if it does remove it from link and the data-target attribute with the same class name.

• If it doesn't – remove the class show from everything (just in case you click on a link when a navigation is already open), then add the 'show' to the link that has just been clicked and it's corresponding data-target. Pretty smart eh?

Just in case you didn't notice it at the top here is the demo again.

DEMO

<br>

Conclusion

It sounds fairly simple in writing but I spent countless hours tying to get this to work and it pretty much didn't without the 'data-target' magic. So I hope I've saved you a lot of time if you're planning to get a similar menu.

If you have any questions feel free to write a comment bellow.