Then we need to find an element with the class "menu" and push it to 120 pixels:

// go 2-levels up the DOM, inside of the element (meaning div with class left / right) we find the desired element, and we add 120 pixels to its width
$( this ).parent().parent().find( '.menu' ).animate( {width: '+=120px'}, 'slow' );
// replace the class of the button (to change the arrow)
$( this ).toggleClass( 'active' );

Drop-down menu

Creating horizontal drop down menus is the most common way of implementing menus for sites, and although it can be easily implemented by using CSS, the present article is about jQuery, so we'll operate within its margins. Let's start with HTML (note, for all the other examples the code is almost identical):

// we locate the ul element and call the slideDown animation
$( this ).find( 'ul' ).slideDown();
// change the background of the selected element by adding the active class
$( this ).addClass( 'active' );

The templates for sub-menus, let's call them menu1.html, menu2.html and menu3.html - their id's are the same as the corresponding menu elements (almost for certain all the data elements will be dynamically generated, but for simplicity, use static pages):

Floating menu

Floating menu. We will need the plugin Dimensions (in order for the methods height() and width() to work) - jQuery 1.3.x no longer has a need in this plugin. Well, I think, you'll get the grasp of HTML:

But first things first, let's start with getting some information about the current position of the "floating" menu:

// receiving information from css about the position of the top menu
menu1 = parseInt( $( '.right' ).css( 'top' ).substring( 0, $( '.right' ).css( 'top' ).indexOf( 'px' ) ) );
// calculate the position of the bottom menu based on the size of the window (96 is approximate)
menu2 = $( window ).height() - 96;