Create a curtain menu using CSS3 and jQuery

Curtain menu started taking place when sliding panels and responsive solutions were started to drive. It provides a responsive design, clean interface for links interactions, multi level for better navigation. I think these reasons are good enough to kick this tutorial out.

See the Pen Curtain Menu using CSS3 and jQuery by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Lets start by looking at the markup. To make sure a easy to code navigation, I tried to simplify the markup as simple as I could. 

<div class='panel'>
  <span class='current-level'>
  Navigation
  </span>
  <nav>
    <ul>
      <li><a href='#'>&#xf015; Home</a></li>
      <li><a href='#'>&#xf09e; Blog</a>
        <ul>
          <li><a href='#'>Coding</a>
            <ul>
              <li><a href='#'>HTML</a></li>
              <li><a href='#'>CSS</a></li>
              <li><a href='#'>Javascript</a></li>
              <li><a href='#'>SVG</a></li>
            </ul>
          </li>
          <li><a href='#'>Marketing</a>
            <ul>
              <li><a href='#'>Ads Solutions</a></li>
              <li><a href='#'>Advertiser</a></li>
              <li><a href='#'>Publisher</a></li>
              <li><a href='#'>Adsense</a></li>
            </ul>
          </li>
          <li><a href='#'>SEO</a></li>
          <li><a href='#'>Social Media</a></li>
        </ul>
      </li>
      <li><a href='#'>&#xf0e0; Contact</a></li>
      <li><a href='#'>&#xf06a; About</a></li>
      <li><a href='#'>&#xf0ad; Tools</a></li>
    </ul>
  </nav>
</div>

A `div` with a `span` tag have class `current-level` displays the text 'Navigation' and changes on different levels.

Then a `nav` tag having the traditional navigation markup. The navigation markup is simple as pie and no need to add any classes to make it functional, I've left that part on jQuery.

jQuery

Since our markup is quite simple therefore we have to work harder on jQuery. We will start by adding our extra necessary markup. This includes level 1 and level 2 containers and back buttons.

// Append level 1 and level 2
  $('.panel nav').prepend('<div class="nav-level-1"><span class="back-button">&#xf060; Back</span><div class="level-1-content"></div></div><div class="nav-level-2"><span class="back-button">&#xf060; Back</span><div class="level-2-content"></div></div>');

Now above line has added some important markup. Next step is to add important classes through which we could attach important events. There are 2 types of links, the first one are those which will turn up on level 1 and others are for level 2. Here is an easy way of determining them.

 // Adding level-1 and level-2 classes and identifiers.
  $('nav>ul>li').has('ul').addClass('level-1-trigger');
  $('nav>ul>li>ul>li').has('ul').addClass('level-2-trigger');

The above selectors and `has` method determines if the link have any sub menu or not, if it does then a class is added to them.Next step is to attach click event on them. 

// Do some magic here
  // Click on level-1-link
  var level_2_text='';
  $('nav').on('click','.level-1-trigger',function() {
    $('.panel nav').addClass('level-1-active');
    var current_content = $(this).children('ul').html(),
      current_link = $(this).children('a').text();
        level_1_text=$('.panel .current-level').text();
    $('.level-1-content').html('<ul>' + current_content + '</ul>');
    $('.panel .current-level').text(current_link);
  });
  // Click on level-2-link
  $('nav').on('click','.level-2-trigger',function() {
    $('.panel nav').addClass('level-2-active');
    var current_content = $(this).children('ul').html(),
      current_link = $(this).children('a').text();
        level_2_text=$('.panel .current-level').text();
    $('.level-2-content').html('<ul>' + current_content + '</ul>');
    $('.panel .current-level').text(current_link);
  });

The `on` method attaches the event handler even if it is added once the DOM is ready. What we basically do here is, whenever level-1 link is clicked, the inner content of the `ul` tag is stored in variable and put that in the container we inserted first. In this way the content replaces each time a link is clicked.

The basic working is on based on CSS transitions. When a link is clicked, a class is added to the parent `nav` tag due to which it revolves.

We not only have to replace content but also the text in span, therefore whatever the text of link is we put that in span. Same procedure is applied for level-2 links. A global variable is placed blank, without any value initially. When a level-2 link is clicked, its text is stored in it for back button. Let us move into it.

// Back button on click
  $('.nav-level-1 .back-button').click(function() {
    $('.panel nav').removeClass('level-1-active');
    $('.current-level').text('Navigation');
  });
  $('.nav-level-2 .back-button').click(function() {
    $('.panel nav').removeClass('level-2-active');
    $('.current-level').text(level_2_text);
  });

Back button does two major functions, first is to remove class to bring back the navigation to the initial position and second one is to replace the navigation text at top.

CSS

CSS is responsible to make the panel functional with the help of classes. Therefore only a bit of code makes the navigation rotate.

.panel nav{
  position:relative;
  -webkit-transition:all 600ms ease-in;
  -moz-transition:all 600ms ease-in;
  transition:all 600ms ease-in;
}
.panel nav .nav-level-1{
  position:absolute;
  left:0;
  top:0;
  margin-left:300px;
  width:300px;
}
nav ul ul{
  display:none;
}
.panel nav .nav-level-2{
  position:absolute;
  left:0;
  top:0;
  width:300px;
  margin-left:600px;
}
.panel nav.level-1-active{
  margin-left:-300px;
}
.panel nav.level-2-active{
  margin-left:-600px;
}

The full code is in the pen above. Hope you enjoyed it, leave a comment.