Nice “Flashy” menu with Jquery.

we are going to create a “Flashy” menu using Jquery. The Menu/Navigation is one of the first thing I focus on when I make a website. It has to be unique, original and  reflect the spirit of the company/client (Fashion,Corporate, Entertainment, Hi-Tech, etc.) .

For this menu you´ll need Jquery, EachDelay, the Easing plugin and the BackgroundPosition plugin.

So, let’s get started!

 

The Markup

Our Div “Menu” will contain the menu list and a span we are going to use as a Button to show/hide the menu list. The “white_line” div will hold the white 1px line seen on the demo page behind the menu. The height of the “white_line” div will be animated when the menu is entered.

 

The CSS

The next picture shows the default state of the menu list.We use a negative Margin-left to hide the

  • Items.

    First we place our #menu div in the top left corner of the page. We use a Background-Image for the text “Menu” of our Button. If you dont want to use an image you can just insert the text of the button in the element of our markup.

    #menu{
    margin-left:50px;
    padding-top:90px;
    margin-top:60px;
    background: url(../images/menu.png) no-repeat 0px top;
    width:164px;

    }

    #white_line{
    height:1px;
    width:100%;
    position:absolute;
    z-index:98;
    background: #fff;
    left:0;
    top:79px;
    }

    Now style your

      list as wanted and hide the
    • list with a negative margin-left of 200px (this can change depending on where you place your #menu div).

      #menu ul{
      list-style: none;
      display: block;
      margin: 0;
      padding: 0;
      text-transform: uppercase;
      font-size:13px;
      width:auto;
      height:auto;
      }

      #menu ul li{
      margin-left:-200px;
      background: url(../images/li.png) repeat 150px top;
      width:140px;
      padding-left:10px;
      }

       

      We are going to use a PNG picture for the second part of the menu animation. The right (transparent) half of the picture we´ll be shown on default state and the left half will slide in when you hover the Item.

      Javascript

      First we have to hide the #menu div and the #white_live div to create a Fade In effect when the page is loaded.

      $("#menu, #white_line").css("opacity","0");
      $("#menu").stop().animate({
      opacity: 0.9,
      marginLeft: '50px'
      }, 2400, 'easeInSine');
      $('#white_line').stop().animate(
      {opacity: 0.7},
      {duration:2400,easing: 'easeInSine'
      })

      When our span button is entered we need to first reset the “opacity” of the

    • items to “1”, animate the Top-position and height of the #white_line div then animate the
    • items into the screen and use the eachdelay Function to add a delay between each
    • transition and create that “domino” effect seen on the demo.

      When the user leaves the #menu div we need to first hide the

    • items with a negative margin, reset the default Background-Position and create a fade out effect by animating the Opacity to 0. Again use the eachdelay function to add Delay between the execution of each
    • item. When the Each-loop animations are complete ( current element is the last
    • of the menu : that means the index of the current li element is equal to $(“#menu ul li”).size() -1) then we need to reset the Top-position and height of the #white_line div.

      $('#menu span').mouseenter(function(element) {
      $("#menu ul li").css("opacity","1");
      $('#white_line').stop().animate(
      {top: 40, height:290},
      {duration:500,easing: 'easeOutBack'}
      )
      $("#menu ul li").eachDelay(function(){
      $(this).stop().animate({
      opacity: 1,
      marginLeft: '0px',
      backgroundPosition: "150px 0px"
      }, 600, 'easeOutBack');  
      }, 30);  
      });

      $('#menu').mouseleave(function(element) {
      $("#menu ul li").eachDelay(function(index){
      $(this).stop().animate({
      opacity: 0,
      marginLeft: '-200px',
      backgroundPosition: "150px 0px"
      }, 600, 'linear');
      if(index == $("#menu ul li").size() -1){
      $('#white_line').stop().animate(
      {top: 79, height:1},
      {duration:600,easing: 'easeInBack'
      })
      }
      }, 30);

      });

      When the user enters an LI item we lower the opacity of all LI items except the one selected, then change the color of the text and Slide in/Animate the Background of the selected Item. When the user leaves the item we reset the background-position, Text-color and Opacity of the Item.

      $('#menu ul li').mouseenter(function(element) {  
      $('#menu ul li').not(this).stop().animate({
      backgroundPosition: "150px 0px",
      opacity: '0.5'
      }, 500, 'linear');
      $(this).stop().animate({
      backgroundPosition: "300px 0px",
      opacity: '1'
      }, 600, 'easeOutBounce');
      $(this).find('a').css("color","#916153");
      });

      $('#menu ul li').mouseleave(function(element) {  
      $(this).stop().animate({
      backgroundPosition: "150px 0px",
      opacity: '1'
      }, 200, 'linear');
      $(this).find('a').css("color","#000");
      });

      Download: http://www.htmldrive.net/items/download/786

  • Leave a comment