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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.