An apple style menu using jQuery

Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.

Author:www.kriesi.at

DEMO

Download:An apple style menu using jQuery (772.99 kB)

License:Free

Set as favorite

Bookmark

Email this

Comments (5) add comment

Show/hide comments

Jognh Secada said:

	... http://plugins.jquery.com/project/JQF1 Man! Look this form style plugin! It`s the most complete form style plugin! Works at IE 6 7 8, Safari (win and mac), firefox (win and mac), Opera, Chrome…
	report abuse vote down vote up

November 28, 2009
Votes: +0

raudabt said:

	... I have downloaded the example ... How do I get the Images to appear with the menu text to force a open/slide of the menu item when hovering over ??? Any help appreciated ... I like this menu style. Thanks, Tom
	report abuse vote down vote up

October 22, 2008
Votes: +0

Nathan said:

...
curious, i've been trying to add a 5th menu item.
Edited the photoshop, and css file
(the bg for the .jpg is different than the .psd - I took care of it but thought you might like to know)
everything works fine, but if I mouse over the 4th item there is an extra 1-2px on the right.
(they are light gray before the line where it should be dark grey)

i've found a hack by putting the resting state of the backgound of the last item to 802px
but I also have a 1px "dead zone" where it will keep the 5th menu active but change the end.jpg to not active.

and it fixes both issues if I edit this in the kwicks.js: (but brings other issues)

// set last kwick
else if(i == kwicks.size() - 1) {
kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
}
changing the 0px to 1px.

But if I do that it also adds a 1px line of the rounded corners end repeating.

I've posted and example here: http://www.ncyouth.org/test/kwicks.html
I've posted the files here: http://www.ncyouth.org/test/kwicks.zip

I'm excited about using kwicks in jQuery, I've used the mootools version, but I like drupal so this is great. It's probably something simple I overlooked, thanks.