JQuery "floating" menu for beginners

This article is designed to help novice jQuery developers. I myself am a novice, so I would like to share my experience with people like me.

My task was to create a “Floating” menu on the website of another client, since the CMS was not the best for the project (Joomla 1.5), and finding an adequate ready-made module and adjusting it to my needs seemed incredibly time-consuming, it was decided to write my own “plugin” "(In quotes, the result can hardly be called a plugin) for the floating menu.

The result of the assignment is not very optimized, perhaps, an illogical code somewhere, but it was developed independently and, I hope, will help newcomers who are faced with a similar task.
')
A solution was created that can later be integrated into almost any system.

The menu markup in this particular case is:

<div id="topMenu"> <div id="activeMenu" style="left: -999px; width: 0px;"></div> <ul> <li><a href="#" class="mainlevel" id="active_menu"> 1</a></li> <li><a href="#" class="mainlevel"> 2</a></li> <li><a href="#" class="mainlevel"> 3</a></li> <li><a href="#" class="mainlevel lastMenuItem"> 4</a></li> </ul> </div>​ 

The activeMenu element, in fact, is the very “floating” element. The menu layout can be changed to fit your needs, while not forgetting to correct the jQuery code.

The CSS for this example is:

 #topMenu{ clear: both; position: relative; overflow: hidden; top: 23px; margin-left: 14px; } #topMenu a{ font-family: Arial; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #686868; text-decoration: none; display: block; float: left; height: 32px; vertical-align: middle; padding-top: 14px; padding-left: 20px; padding-right: 20px; border-left: 1px solid #ccc; z-index: 2; position: relative; } #topMenu a:hover{ text-decoration: none; color: #3d3d3d; } #topMenu a.lastMenuItem{ border-right: 1px solid #ccc; } #activeMenu{ position: absolute; width: 0px; height: 47px; left: -999px; background: #c0c0c0; z-index: 1; } 

Well, actually, jQuery code itself with comments:

 jQuery(document).ready(function(){ if(jQuery("#active_menu").length>0){ //     ,       var menuWidth = jQuery("#active_menu").outerWidth(); //      var menuLeft = jQuery("#active_menu").position().left; //       jQuery("#activeMenu").stop().animate({ //    left: menuLeft+'px', width: menuWidth+'px' }, 500, 'linear'); } jQuery("#topMenu a.mainlevel").mouseover(function(){ //         .   ,      ,      ,       var menuWidth = jQuery(this).outerWidth(); var menuLeft = jQuery(this).position().left; jQuery("#activeMenu").stop().animate({ left: menuLeft+'px', width: menuWidth+'px' }, 300, 'linear'); }); jQuery("#topMenu").mouseleave(function(){ //           (     ,    ) if(jQuery("#active_menu").length<=0){ //    ,       jQuery("#activeMenu").stop().animate({ left: '-999px', width: '0px' }, 500, 'linear'); } else{ // ,      –     var menuWidth = jQuery("#active_menu").outerWidth(); var menuLeft = jQuery("#active_menu").position().left; jQuery("#activeMenu").stop().animate({ left: menuLeft+'px', width: menuWidth+'px' }, 500, 'linear'); } }); });​ 

I do not pretend to ideality or even the cross-section of the written code, I will be glad to constructive criticism - it will help both me and novices who have read this article.

You can see the demo here - jsfiddle.net/bYY6Y/7

Changes from yurik417 :

And about constructive criticism:
1. The animation you have at different events is the same, so you should write only one function and call it when necessary.
2. You constantly refer to the same elements and you are constantly searching for DOM - this is wrong. These elements should be cached in variables.
3. Well, read about the event .on ()
jsfiddle.net/bYY6Y/71/