An apple style menu using jQuery - Open Source Accordions | Menu | Form

Friday, 09 January 2009

Home

jQuery

Accordions | Menu | Form

An apple style menu using jQuery

(23 votes, average: 4.17 out of 5)

Written by admin

Monday, 11 August 2008 23:46

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 (4) add comment

Show/Hide comments

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.