Comments on: jQuery Tutorial : Horizontal Animated Menu

By: Felix Widjaja

Felix Widjaja — Tue, 24 May 2011 07:58:05 +0000

NICE MENU!

By: doli

doli — Thu, 31 Mar 2011 09:35:58 +0000

thanks bro…

By: Vazi

Vazi — Mon, 18 Oct 2010 09:05:27 +0000

Awesome thing, and I thank you for that. The only problem is… it’s not working on IE (7). Though it works perfectly on Firefox and Opera. Any solutions, please?

By: ronggur

ronggur — Tue, 28 Sep 2010 18:47:40 +0000

Thanks for stopping by and leave comment

By: Maxwell

Maxwell — Tue, 28 Sep 2010 09:26:58 +0000

I was looking for this sort of tutorial for long time and finally got it.. thanks for sharing awesome post

By: animation menu using css and jQuery | CSS & JQuery Sample

animation menu using css and jQuery | CSS & JQuery Sample — Tue, 14 Sep 2010 02:41:20 +0000

[...] View |Tutorial| [...]

By: Daley

Daley — Wed, 14 Jul 2010 14:41:44 +0000

Hi,
First of all I’d like to say thanks for a great tutorial.
My first thought once I had it running however, was that as a user you would expect to click anywhere on the black rectangle to navigate to that page yet in the example you give the users would have to click on the text itself (from within the tags) every time.

My simple solution is below as i think others may find it useful.

So the jQuery would require;

//This changes the cursor to the hand pointer we expect when we roll over a link

$(“li”).hover(function(){

$(this).css(“cursor”,”pointer”);
});

//This then drills down into the li tag to find the a tag and then use the a tags href value
$(“li”).click(function(){
window.location = $(this).children(“a”).attr(“href”);

});

//The html would then have to include a proper href value for the jQuery to find and use eg.

Home
About Us
Contact Us

As a result when you roll over any of the black rectangles the cursor changes to reflect a hyperlink pointer and then a click anywhere on that rectangle causes the navigation to fire.

By: ronggur

ronggur — Thu, 29 Apr 2010 16:38:50 +0000

@sajan : thanks

@Micah : the easiest way, you can remove/remark this part

$(this).find(“a”).after(“”+description+”")

and add manually description you want in

By: Micah

Micah — Thu, 29 Apr 2010 03:09:50 +0000

Hi this is one of the best horizontal menus i’ve seen as it validates correct html.
I have one question. How do I use text in the li and not in the title field.
I tried the advice you gave to nicolas but couldn’t get it working
I would really appreciate the help, Thanks

By: sajan kota

sajan kota — Sun, 14 Mar 2010 08:51:55 +0000

Great Tutorials. Keep up the good work.