How is this divs mega menu shown/hidden on click?

HTML & CSS
1

Dear all, just going over http://www.rackspace.com/ I noticed their mega menu doesn’t have the traditional hover and is done by click to drop down contents.

On inspection, I see they are using divs and not unordered lists.

However, I cannot find the scripts that show/hide the divs in their code.

I would like to understand how they did this, are they using scripts and if so where?

Many thanks

2

They are doing a simple add/remove class operation with jQuery, nothing ‘fancy’.

For example this part of the script closes all mega menus when the search filed has focus. It’s possible the functionality for this is scattered all over, or loaded secondarily.


				$('#search').focus(function(){
					$('#search-button').addClass('active').removeClass('inactive');
				}).focusout(function(){
					$('#search-button').addClass('inactive').removeClass('active');
				});

hope that helps