Creating a dynamic animated tree menu

Tree menus are a great way to display a lot of information in a confined space and allow users to choose the information they wish to see. This recipe will show you how to dynamically create a tree menu based on a set of JSON objects with slide up and down effects.

Getting ready

Create recipe-7.html, recipe-7.js, and recipe-7.css for this recipe, ensuring that they are saved in the same directory as the latest version of jQuery.

How to do it…

To create an animated tree menu, ensure you complete all of the following instructions:

  1. Add the following HTML code to recipe-7.html to create the basic web page required for this recipe:
    <!DOCTYPE html> <html> <head> <title>Chapter 6 :: Recipe 7</title> <link href="recipe-7.css" ...

Get jQuery 2.0 Development Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial