JQuery animated vertical menu

DannyBoy Published at Dev

DannyBoy

I'm trying to create a vertical menu which includes some animation.

I would like the user to hover over part of the the element which triggers the element to expand in width and show some text.

I have had a go at it for the past couple of days but feel i am now just making things worse!

Any help or advice on this would be much appreciated.

here is my fiddle: http://jsfiddle.net/danieljoseph/NZ2QL/3/

Here is the JQuery:

$("nav li").hover(function () {
  $("nav li").css('width', 'auto');
});

$("#about-btn").mouseover(function () {
  $("#about-btn .tab").animate({
    width: "190px"
}, 1000);
});
$("#about-btn").mouseout(function () {
  $("#about-btn .tab").animate({
    width: "0"
  }, 1000);
});

$("#services-btn").mouseover(function () {
  $("#services-btn .tab").animate({
    width: "190px"
  }, 1000);
});
$("#services-btn").mouseout(function () {
  $("#services-btn .tab").animate({
    width: "0"
  }, 1000);
});

$("#work-btn").mouseover(function () {
  $("#work-btn .tab").animate({
    width: "190px"
  }, 1000);
});
$("#work-btn").mouseout(function () {
  $("#work-btn .tab").animate({
    width: "0"
  }, 1000);
});

$("#contact-btn").mouseover(function () {
  $("#contact-btn .tab").animate({
    width: "190px"
  }, 1000);
});
$("#contact-btn").mouseout(function () {
  $("#contact-btn .tab").animate({
    width: "0"
  }, 1000);
});

I'm an amateur when it comes to JQuery so any tips and explanations would be great if possible.

Thanks.

Bhavik

`Demo Fiddle`

jQuery Code

$("nav li").hover(function () {
    console.log($(this).children().children('.tab'));
    $(".tab", this).stop().animate({
        width: "190px"
    }, 1000);
}, function () {
    $(".tab", this).stop().animate({
        width: "0"
    }, 1000);
});

According to me direct children of <ul> must be only <li> so I even changed there position which was wrong in the fiddle you gave...

NOTE: This task could be done using pure css, which would be much lighter

Update Not part of the question: