Categories
Tutorials

Multilevel animated dropdown

So you have grown tired of your standard navigation and want to make it a bit more “living”. Fear no longer, follow this short guide and create a minimalistic multilevel dropdown menu using HTML, CSS and some jQuery.

The concept is very strict and would thrive on the front page of a creative website, perhaps even on a Squaerspace where is where I created it the first time.

To build the menu you will be using un-ordered lists and target the different levels by the use of classes.

Here is an overview of the menu and one way of presenting it.

<ul>
  <li class="headtitle">New York</li> <!-- First title -->

  <ul><!-- Opening for first category -->

    <li class="category">Restaurants</li>

      <ul><!-- Opening for links (level 3)-->
         <li class="link"><a>Le Bernardin</a></li>
         <li class="link"><a>Zuma</a></li>
      </ul><!-- Closing level 3, going back to level 2 -->

    <li class="category">Bars</li><!-- Second category -->

      <ul><!-- Opening for second set of links -->
         <li class="link"><a>NoMad Bar</a></li>
         <li class="link"><a>The Dead Rabbit Grocery and Grog</a></li>
      </ul><!-- Going back to level 2 -->

  </ul><!-- Going back to level 1 -->

</ul><!-- Closing the menu -->

To build it we are creating nested lists. The first <ul> element is to hold all of the Titles, this is level 1. To place a Title in the menu, add your first <li>Title 1</li>. Right after that first element you insert a new <ul>. This element will hold the categories, this is level 2. Insert a new <li>-element with your first category and you guessed it, right after add a new <ul>. Now we are at level 3 which will hold the actual links. Add as many <li>-elements that you need to fill the category with links, then close your list with </ul>. You are back at level 2. Now you repeat the steps above to create the rest of your categories and links. When done with your last category for Title 1, you close your list with an extra </ul> after closing your last category. You are back at level 1 and can add Title 2. Then it is just about repeating the steps above.

Make sure you apply the correct classes in the hierarchy, those will be used to target the different levels with the javascript.

$(document).ready(function(){
  $(".headtitle").nextUntil(".headtitle").slideToggle();
  $(".category").nextUntil(".category").slideToggle();
  $(".headtitle").click(function(){
    $(this).next().slideToggle();
  });
  $(".category").click(function(){
    $(this).next().slideToggle();
  });
});

This part is really easy. We start off by checking that the document is fully loaded before we fire any scripts. Then, row 2 & 3 makes sure the menu folds as the visitor enters the site. Row 4 defines a simple function to look for a click on an element with the class “headtitle” applied to it – this is why the classes are important. When a click is registered on an element of that class it looks in the code and checks what comes next. Given the way you have created your menu the next element is a list of categories which will now slide down. On row 7 we make the same check but for the categories, and since they hold a list of links, those links will slide down.

For some quick and easy styling to make it look like a menu and not nested lists, see below CSS.

ul{
  right:0;
  margin-left:0;
  padding-left:0;
}

li{
  list-style:none;
  margin-left: 0;
  padding-left: 0;
  left: 0;
}

li.headtitle{
  font-size: 1.5em;
  font-weight: bolder;
}

li.category{
  font-size: 1.3em;
  margin-top: 8px;
}

li.link{
  line-height: 1.5em;
  font-size: 1.1em;
  font-weight: lighter;
}

Good luck, let me know if you run into any issues!