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:
Add the following HTML code to
recipe-7.htmlto create the basic web page required for this recipe:<!DOCTYPE html> <html> <head> <title>Chapter 6 :: Recipe 7</title> <link href="recipe-7.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js"></script> <script src="recipe-7.js"></script> </head> <body> <div class="container">...
