Creating a floating menu

In the previous chapter Adding Visual Effects to Forms, we learnt to create a floating box that shifts its position as the user scrolls up or down on a page so that it is always visible. We can use this effect to create menus, which will be helpful for users if the pages are too long. In a normal case, if the user has scrolled too much down on a page, they will have to go all the way up to access any menus or submenus.

We can design a menu inside the floating box itself so that it is available to users all the time while they are on the page. This recipe will explain how you can design such menus.

Clicking on a menu item will reveal submenus inside it. Menus can be multiple levels deep also.

Getting ready

Create a folder named Recipe4 inside the Chapter7 directory.

How to do it...

1. Create a new file inside the Recipe4 folder and name it as index.html.

2. We will create menus in such a way that we can have as many submenus as possible without having to change our jQuery code...