Toggle and Slide Pattern

This pattern is similar to the multi-toggle pattern in that we're hiding the submenu by default. It differs mainly in how the submenu is revealed when the top level link is clicked.

Instead of the submenu opening in an accordion pattern, here it will slide in from the left. This will mostly be accomplished with css, though we'll extend the jQuery we're using just a bit.

The HTML

The html below is similar to the html used in the multi-toggle pattern. The difference is the submenu has been moved to the Toogle & Slide menu item. Also note the additional "Back" menu item added to the submenu.

<label class="btn" for="toggle" onclick>Menu</label>
<input id="toggle" type="checkbox" />

<nav>
  <ul id="nav">
    <li><a href="">Back to Post</a></li>
    <li><a href="toggle.html" class="contains-sub multi">Toggle</a></li>
    <li><a href="multi-toggle.html">Multi-Toggle</a></li>
    <li class="current"><a href="toggle-slide.html">Toggle & Slide</a>
      <ul class="submenu" class="contains-sub slide">
        <li><a href="toggle-slide.html" id="back" class="contains-sub">Back</a></li>
        <li><a href="toggle-slide.html">Toggle & Slide Sublink 1</a></li>
        <li><a href="toggle-slide.html">Toggle & Slide Sublink 2</a></li>
        <li><a href="toggle-slide.html">Toggle & Slide Sublink 3</a></li>
      </ul>
    </li>
    <li id="close"><label for="toggle">Close</label></li>
  </ul>
</nav>

The Submenu CSS

Much of the css is once again the same as was used for the initial toggle pattern. The submenu, while similar to the multi-toggle submenu, is will look different. First I changed the character on the :after pseudo element to be a right facing triangle instead of downward pointing.

To accomplish the slide, the submenu is initially positioned to the left at -100%. When it has the .open class applied it's position is changed to 0. The transitions will create the slide effect.

To make it clearer a new menu is sliding on top of the current one the color is made slightly lighter. Finally the back link gets a left facing triangle, this time on it's :before pseudo selector.

.slide:after {
  content: " \0025B6";
  font-size: 0.5em;
}

.submenu {
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  -webkit-transition: 0.75s;
     -moz-transition: 0.75s;
      -ms-transition: 0.75s;
       -o-transition: 0.75s;
          transition: 0.75s;
}

.submenu.open {
  left: 0;
}

.submenu.open a {
  background: #555;
}

#back:before {
  content: " \0025C0";
  font-size: 0.5em;
}

The CSS in Media Queries

As with the other two patterns, the media queries are used to switch the menu from vertical to horizontal and to properly display the submenu.

The Javascript to Open/Close the Submenu

The jQuery below is familiar to what was in the mutli-toggle pattern. Once again it starts by finding the link with the class of accordion and adding or removing the .open class to it's sibling.

The submenu needs it's own click function to close. The new function works the same way, though it acts on a parent element instead of a sibling.

Note: We really only need to add the .open class in the first function and remove it in the 2nd function. When the submenu is open it will cover the main menu. We'll only ever click back when the open class is present. Similarly we'll only ever click the original link when the class isn't present.

I included the both in the first function, since the same function is used to control the multi-toggle and I included both in the 2nd for the possibility of further additions.

$(document).ready(function() {
  $('a.contains-sub').click(function() {
    if($(this).siblings('ul').hasClass('open')){
      $(this).siblings('ul').removeClass('open');
    } else {
      $(this).siblings('ul').addClass('open');
    }
    return false;
  });

  $('ul.submenu a.contains-sub').click(function() {
    if($(this).offsetParent('ul').hasClass('open')){
      $(this).offsetParent('ul').removeClass('open');
    } else {
      $(this).offsetParent('ul').addClass('open');
    }
    return false;
  });
});