Comments on: jQuery Tutorial : Horizontal Animated Menu

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.

By: ronggur

ronggur — Sat, 26 Dec 2009 19:30:15 +0000

@Nicolas : Sure, you can add inside/between this script

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

}

or maybe you can change

tag with tag

By: Nicolas

Nicolas — Wed, 23 Dec 2009 23:22:18 +0000

how can i had links in hte part that expands?

For what i have seen,
Home

the part that expands is the one taged as title (DUH ), but is there a way in which i can include for example more links when hovered?

Regads!

By: ronggur

ronggur — Fri, 20 Nov 2009 16:50:49 +0000

Thanks Arley for your note

By: ArleyM

ArleyM — Fri, 13 Nov 2009 17:15:18 +0000

!important: Note that @Shropshire’s code needs a find and replace done on the (“) quotation marks and the paragraph tags need to be put back into the line:

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

note, I added spaces in the P tags to prevent the comment system from rendering them.

Great work!

By: SkyTeam » Blog Archive » Horizontal Animated Menu

SkyTeam » Blog Archive » Horizontal Animated Menu — Sun, 04 Oct 2009 10:11:59 +0000

[...] http://sandbox.ronggur.com/2009/01/25/jquery-tutorial-horizontal-animated-menu/ view plaincopy to clipboardprint? [...]

By: ronggur

ronggur — Sat, 05 Sep 2009 04:05:40 +0000

marii om don, terimakasih sudah berkunjung .. sering2 datang ya, akan ada beberapa artikel yg sedang dipersiapkan *promosii*