Colorful jQuery animation slide menu

DOWNLOAD

This is a nice and colorful jQuery and css menu
The Idea is to create a normal ul li menu and apply a top border to the anchor tags with colors that will match with the element background color when it is hovered.

The jQuery will create a span element and insert it into the HTML structure, this is the colourful background that will be moving across the menu.

HTML Structure



 <!-- start menu -->
<div id="menu">
<ul>
<li>
                <a href="">Web Design </a>
              </li>
<li>
                <a href="">jQuery</a>
              </li>
<li>
                <a href="">Html5 & Css3</a>
              </li>
<li>
                <a href="">PHP</a>
              </li>
<li>
                <a href="">Photoshop</a>
              </li>
<li>
                <a href="">Illustrator</a>
              </li>
<li>
                <a href="">WordPress</a>
              </li>
<li>
                <a href="">Tutorials</a>
              </li>
<li>
                <a href="">Tutorialpot</a>
              </li>
</ul></div>

      <!-- end menu -->

jQuery



This is where the colors are applied and the background is animatedacross the menu


jQuery(document).ready(function($) {

 /* create the span tht will be animated across the menu*/
 /* declare our many variables for easy ref*/

  var $span = $('<span class="colourful"></span>');
  $span.insertBefore($("#menu ul"));

  var $menu_link = $('#menu li a'),
  $hovered =  $('#menu a.hovered'),/**/
  $hovered_pos = $hovered.position('#menu');/*position of hovered menu item*/

  /* declare our many colors that can confuse a chameleon*/
  var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab'];

  /*iterate through all menu links and apply colors to border top */
  $menu_link.each(function(index){

     $menu_link.eq(index).css('border-color',$colour_arr[index]);

   }); 

 /* all the magic happens here*/
 function init () {

  if($hovered_pos) {
    $span.css('left',$hovered_pos);
    var index = 0;
    /* search for the selected menu item*/
    for(i=0; i<$menu_link.length; i++) {
     if($($menu_link[i]).hasClass('hovered')) {
      index = i;
     }
    }
    $span.css('background',$colour_arr[index]);

  }
  /*mouseenter funtion*/
  $menu_link.each(
   function( intIndex ){
    $(this).on (
     "mouseenter",
      function(event){

       var x = $(this).position('#menu');
       x = x.left;

        $span.css('background',$colour_arr[intIndex]);

       $span.stop();
       $span.animate({

        left: x
         },300);
      }
     );

    }
   );
  /* mouseout function*/
  $menu_link.each(
   function( intIndex ){
    $(this).on (
     "mouseleave",
      function(event){
       $span.stop();
      var x = -100;
      if($hovered_pos) {
       x = $hovered_pos;
       var index = 0;
       for(i=0; i<$menu_link.length; i++) {
        if($($menu_link[i]).hasClass('hovered')) {
         index = i;
        }
       }
        $span.css('background',colour_arr[index]);

      } 

        $span.animate({

        left: x
         },300);
      }
     );
    }
   );
 }
 /* call/ init our function*/
 init();
});



Css



A simple css for our awesome menu


#menu { float: left; position: relative; top: 0; left: 0; overflow: hidden;}
#menu .colourful { display: block; position: absolute; background: #f0ad22; height: 38px; width: 85px; top: 4px; left: -100px; }
#menu ul { margin: 0; padding: 0; list-style: none; float: left; position: relative; top: 0; left: 0; z-index: 1; }
#menu li { float: left; margin: 0 1px 0 0; }
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active { color: #000; text-align: center; display: block; border: solid; border-width: 4px 0 0; line-height: 40px; width: 85px; }
#menu li a:hover { text-decoration: none; color: #fff; text-shadow: 0 0 1px #999; }



That's it,hope you like it!
Labels: