Create an apple style menu and improve it via jQuery

Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.

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.

This is what we are going to build (don't forget to hover over the menu)

Since the Tutorial is rather long and comprehensive here is a short overview of the upcoming tasks:

Part 1: Conceptional Work
Part 2: Photoshop
Part 3: HTML and CSS
Part 4: jQuery
Part 5: Voluntary Exercise – Rounded Corners
Part 6: Holy crap, too much work, I just want to download this and leave

Part 1: Conceptional work

First of all you should do some conceptional work since

you need to know the height of your menu items
you need to know the width of your menu items, both in normal and hover state.
you need to know how many items you want

After creating a single JPG file out of photoshop we will use a fairly common technique called CSS Sprites to display the menu. By creating a navigation using an image sprite, you can have a complete navigation with rollovers by only using one image.
Never heard of that technique before? Here is a pretty good explanation if you want to know it in detail

My menu will contain 4 menu items, each 40px high, 125px width in normal state and 200px on hover state.

So I will create a new .psd file with the dimension of 800px x 80px. The width is the result of the hover state multiplied with the number of menu items (200 x 4), the height is two times the menu height: we will display the hover state of the menu item directly below the normal state.

Part 2: Photoshop

After creation of your new photoshop file you should add some layer guides. This really helps aligning the different menu items pixel perfect:

As you can see i divided the canvas with a single horizontal line at the 40px mark, and made a guide every 200px to mark the end of each menu item. I then made a guide for the 125px normal state as well. These Guides are not needed but very helpful ;)

Now create a new layer, select black (this is important for later) as foreground color and draw a rectangle which fills the upper half of your file. Then double click the layer in the Layers palette to open the layer styles, select Gradient and apply a gradient with the foreground color #959595 and #d0d0d0 as your background color. The result should look similar to the the picture above. Opacity should be 100%.

Now we are adding the inset text: Select the Type tool and set the font to Myriad Pro Regular and #444444 as color. Open the layer styles for this layer and select the Drop Shadow option, then apply the following settings:

Blend Mode: Normal
Color: #FFFFFF (white)
Opacity: 50%
Use global light: off
Angle:90Â°
Distance:1
Spread: 0
Size:0

To center the text pixel perfect horizontally as well as vertically select the marquee tool and draw a rectangle. Thanks to the layer guides the rectangle will snap into position and have the exact same height and width for each item. Then select the move tool and hit the align buttons for align vertically and horizontally. Repeat this for each menu item.

Next we will add the icons for the hover effect. I used the famous "Bright" Icon set by Min Tran. These icons should be applied between the 125px and 200px guide. After doing that create a new folder in the layer palette and put all layers created until now into this folder.

Now duplicate this folder. Select it with the Move tool and drag it 40pixel down. The horizontal guide should help you putting it into the right place. After doing that go to the layer style palette for this layer and set the opacity of the gradient to 80%. Last thing to do is to change the color of the Text to #FFFFFF and edit the Text layer styles:
Set the drop shadow to -90Â° and the color to #000000. The image above shows you how your image should look now.

To add the borders between the menu points select the line drawing tool and set the foreground color to #969696. Select the pixel mode and remove the checkmark from anti alias. This is needed to draw a exact line of 1px without any blur. After drawing this line from top to bottom of the image go to the layer style palette again and add a border of 1px, color: #b8b8b8, position outside and set the Blend Mode to Lighten.

After doing thatÂ align the borders directly beside the layer guides as seen in the picture.

What we got now should look something like this:

Now export this image as kwicks_sprite.jpg. Don't slice anything, just export the picture ;)

Part 3: HTML and CSS

The HTML part is rather easy: all we need is an unordered list with classname kwicks. Each list item must have an id which is composed of kwick + the number of the item.

 <ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
 </ul>

Thats it for the HTML part, now comes the CSS:

 .kwicks {
     list-style-type: none;
     list-style-position:outside;
     position: relative;
     margin: 0;
     padding: 0;
 }

This is needed to remove margins and paddings from the menu, as well as the list bullets.

 .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    float: left;
   Â width: 125px;
   Â height: 40px;
   Â margin-right: 0px;
   Â background-image:url(kwicks_sprite.jpg);
   Â background-repeat:no-repeat;
}

Major styling done for the list item here. Height and width are set and our image is set as background for each list item. Since we don't want to display the normal list Text we set the text indent for all links to:-9999px:

.kwicks a{
	display:block;
	height:40px;
	text-indent:-9999px;
	outline:none;
}

What we got now looks pretty good: HTML- Step 1

Now we want to display the appropriate menu point so we have to change the offset of the background image with css for each list item:

#kwick1 {
	background-position:0px 0px;
}
#kwick2 {
	background-position:-200px 0px;
}
#kwick3 {
	background-position:-400px 0px;
}
#kwick4 {
	background-position:-600px 0px;
}

And voila, looks like a real menu: HTML- Step2

Next thing we do is adding the roll over state:

#kwick1.active, #kwick1:hover {
	background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
	background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
	background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
	background-position: -600px bottom;
}

The pseudo class ":hover" is added to the list item and not to the <a> tag. Since Internet Explorer 6 can only work with this pseudo class when applied to an <a> tag we define an extra active class which accomplishes the same. This class will be automatically added by the jQuery script on hovering. You might ask yourself why I didn't style the <a> tag with the background image to circumvent this problem. I do this because of the round corners which I will apply later on. I could have done it anyway with a little bit of extra HTML markup but I want to keep the HTML as clean as possible. It's truly only a matter of preference. If you intend to create a menu without round corners you can apply the background images, as well as the offsets directly to the <a> tag.

So if you are using a browser other than IE6 you can see a basic CSS sprite menu with different hover states now: HTML- Step3

Thats it for the CSS part, we will add the round corners add the end of the tutorial since its something not everyone will be interessted in and demands a little bit of extra work.

Part 4: jQuery

To add the sliding effect we need to add the wonderful kwicks plugin for jQuery created by Jeremy Martin. Of course you need to import the jQuery framework as well.

Your HTML head should look something like this:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='kwicks.js'></script>
<script type='text/javascript' src='custom.js'></script>

Be careful with theÂ order of the items. Due to the fact that the kwicks plugin relies on some of the CSS classes we defined you must include the CSS before the kwicks.js file. The custom.js file is a blank Javascript file which you should create, we will now add the code of execution to this file:

 function my_kwicks(){
    $('.kwicks').kwicks({
        duration: 300,
        max: 200,
        spacing:  0
    });
}  

 $(document).ready(function(){
	my_kwicks();
});

The code is rather easy to understand: the function my_kwicks calls the execution of the plugin with several parameters:

duration of the sliding effect in milliseconds
max width of each kwicks item in pixel
spacing between the items in pixel

You can define many more parameters, a comprehensive list can be found at the plugin page at the documentation tab.
The ready function executes the code as soon as the site (in particular the DOM) is loaded. Thats it for the jQuery magic as well: here we got the working example

Congratulations, you are done now ;)

Part 5: Voluntary Exercise – Rounded corners

The rounded corners can be added with different techniques. Since a major part of this tutorial is dedicated to the task of CSS Images sprites we will extend this a little bit by creating a rounded corner sprite. One image for the left and right corners, along with the hover state. The easiest way creating an image sprite like this is aligning the different sprites below each other. Since we need 4 different sprites we will create an image of 160px height and a width of your choice. The width doesn't matter since we will crop the image afterwards. ( I will use 40px width for now)

First you should add layer guides again for pixel perfect alignment.
Select black as your foreground color and draw a rounded rectangle (8px radius, anti alias:on).
Copy this rectangle 4 times and apply the same layer style of the menu background, which we created in Part 2: Photoshop. The 2 bottom rectangles are for the hover state of the menu, so they need to have the same layer style as the hover state of the menu items (opacity:80%)
Now move rectangle 2 and 4 out of the canvas until you only see the round corners.
Crop the image so that only the round corners can be seen.

Export the Image as end.jpg and add the following styles to your CSS file:

#kwick1 a{
	background-image:url(end.jpg);
	background-repeat:no-repeat;
	background-position: left 0px;
}

#kwick1 a:hover{
	background-position: left -80px;
}

#kwick4 a{
	background-image:url(end.jpg);
	background-repeat:no-repeat;
	background-position: right -40px;
}
#kwick4 a:hover{
	background-position: right -120px;
}

This adds the corner sprite to the first and fourth menu item and overalps the background for the list item.

Your are done now: here is the final menu

Part 6: Holy crap, too much work, I just want to download this and leave

Well, in case you couldn't get this to work or are to lazy to create the files: here is a Zip- Package with all items: psd files, html, css and javascript:

Download Includes: PSD Files, HTML File, CSS File, Javscript Files

Hope you liked the tutorial and learned something, have a nice day ;)

Add to Digg Add to del.icio.us Add to StumbleUpon Add to technorati

Responses to “Create an apple style menu and improve it via jQuery”

Josep Viciana July 28th, 2008 at 9:06 am
Wow, amazing.

I really like this blog, thanks!
Andrei Gonzales July 28th, 2008 at 11:36 am
Small note regarding the borders – you can also use the selection tool (M in photoshop) to "draw" a 1px empty container on a blank layer, and then use the paint bucket tool (G) to fill it in with the color you like. This way, you can also create a very controlled environment for the border (e.g. using a soft brush tool to add a "burst" of brightness that doesn't extend across the entire height).

Good jQuery too btw.
Romain Dorgueil July 28th, 2008 at 1:08 pm
Hey nice tutorial.

Btw the menu of your site has some problems on my config (firefox 2 on linux): the template image of little particles going up is shown over the logo, and also duplicated where it should be. Additionaly, when i mousehover over another item (i mean, switch which button i hover), i have the shape of the particles image (ie a rectangle) that blink once before showing it right.

But I realloy like your technique, it looks great and it's fully accessible and unobstrusive. Great job :)
Kriesi July 28th, 2008 at 1:22 pm
Hey Romain, thanks for the information, guess its time for me to get a linux installation as well for testing purpose ;D
Jordan Wollman July 28th, 2008 at 5:52 pm
Nice tutorial. Great work.

This is an interesting technique – I've done some similar work, but this is much reduced from a code standpoint, and certainly from an effort standpoint.
legco.net July 28th, 2008 at 8:11 pm
Wow, really amazing, i love jQuery mach more!
Shaho July 28th, 2008 at 10:36 pm
Fantastic!
Ryan Battles - Freelance Web Designer July 29th, 2008 at 3:13 am
What a nice tutorial. Thanks for taking the time to teach us your amazing skills!
Buzzlair July 29th, 2008 at 6:44 am
Thanks for sharing the tutorial. Can u write a tutorial of how to create the header like yours. i dont think its flash. But how did u make it?
Dwayne Charrington July 30th, 2008 at 11:59 pm
Spectacular tutorial! you wrote it up pretty nicely, it was easy to follow along to.
Alexis GarduÃ±o August 4th, 2008 at 9:11 pm
It's great
illusiv August 5th, 2008 at 1:01 pm
Very nice article! Thanks
ZoiX August 5th, 2008 at 11:39 pm
Great tutorial! :D

Can you explain the "particles" in your header?
I don't know, but, maybe you are using JQuery Flash, right?

Thanks again por this tutorial, really good; and thanks for your answer about the particles.
Kriesi August 6th, 2008 at 12:00 am
Hey ZoiX, you are right I use this plugin to place a small swf file on top of the header. To create particles like that you should search the web for a tutorial, I can't really explain how I did it, it kind of happened during an experiment =)
Panther August 7th, 2008 at 8:57 pm
Excellent tutorial, can't wait to try it out on a site of my own. Thanks!
Apple Repair Guy August 18th, 2008 at 2:57 pm
Beautiful.

How much would you charge to make me one for my website.
Aquarius August 18th, 2008 at 5:46 pm
Looks very nice, JQuery is really a powerful tools.
Fabolous August 18th, 2008 at 7:59 pm
Wow thanks this is a great tutorial <3
Shon August 26th, 2008 at 3:27 am
Can you make this menu into a multi level menu?
PleX August 27th, 2008 at 7:51 pm
2nd The Motion For The Multilevel lol
Man[vel] August 28th, 2008 at 6:54 pm
Hi Kriesi, thanks for this excellent tutorial.
but i need some help for finalize my menu:
http://www.visiocore.com/kwicks/kwicks_final.html
I do how in tuto but it's doesn't work correctly, i have a big bug :)
Can u look it please and tell me what is wrong in the css?
Thanks in advance.
See ya
Paolo September 9th, 2008 at 8:11 pm
really fantastic. Thanks for your little tutorial… :)
Matt September 13th, 2008 at 6:25 pm
Amazing !
I have downloaded your zip file but i don't know how to use it :( I'm a beginner.. Can you tell me how can i use it ?

Thanks You !
lollielala October 4th, 2008 at 4:04 am
Thanks, I tried
to add colour – it looks cool
but now it no longer looks MAC-ish.
This tutorial is nice way
to ease into learning
that very sexy jQuery scripting stuff.

again thanks _(~~)_
fedmich October 14th, 2008 at 9:34 am
Nice one :)
Thanks for sharing this
nurettin October 19th, 2008 at 5:10 pm
Thansk very good menu
toun October 20th, 2008 at 4:59 pm
amazing menu! thnx :)
dave_leno October 22nd, 2008 at 8:16 am
This is awesome, thanks.
Ted October 24th, 2008 at 6:21 am
I tried using your menu and in the same page the pathfusion multibox which uses mootools and it doesn't slide. It just keeps the rollover effect.

Here is the code:

If I comment or delete the last two lines, your menu works flawlessly…

Any help would be appreciated…thank man…GOOD JOB!

(you got my email)
Ted October 24th, 2008 at 6:23 am
oops…the code didnt appear here it goes again:

(script type='text/javascript' src='jquery-1.2.6.min.js'></script)

replaced < with ( to make it appear in comments…lets see if it works.
Steven October 31st, 2008 at 2:35 pm
Hello!
Very nice Tutorial! Thanks!
I was wondering if I could combine it with the jQuery Dropdown Menu.
I just couldn't figure it out!
Greedings.
Web Agentur December 12th, 2008 at 11:11 am
Thank you … this tutorial has me very helped.
ser December 19th, 2008 at 2:48 pm
Tested on Mandriva 2008.0 with Firefox 2.0.0.6 and Epiphany browser.
Without any issues or failure. :)

Very nice post! Thanks
Vivekanand January 9th, 2009 at 4:40 pm
This is an excellent tutorial which you have posted here, thanks for this and for your effort.

Thanks,
Vivek
[vivek@developersnippets.com]
Asker January 12th, 2009 at 10:05 am
Thank you so much
chris February 14th, 2009 at 8:35 am
really nice
Ghulam Mustafa February 15th, 2009 at 2:19 pm
Well, creativity always amazes me…. and this one surely does.
Many thanks.
Wynand February 20th, 2009 at 3:16 pm
THIS ABSOLUTELY AWESOME!!!!!!!!
Best menu Tutorila I've come across so far.

Thank You
Lifewings February 20th, 2009 at 3:29 pm
Very Nice!

Can You Tell Me The ".DS_Store" Is Do What?

(Sorry,My English….)
Jastreb February 22nd, 2009 at 12:53 pm
Kriesi thanks for this tutorial, I have implemented this menu on my ClickPlay Games site.
ben jones March 3rd, 2009 at 12:18 am
I can't get it to work in IE7… is there something I need.
alabaster March 4th, 2009 at 3:47 pm
awesome Work!
Ren March 5th, 2009 at 8:14 am
Great tutorial !

Just wondering how I could make a menu option -when active/clicked- stay "open" so that I could have submenu items.

So in other words – now you hover over a item and you see the whole menu item – when I click a certain menu item I want it to stay like that ..

Already have been trying it in the custom.js file but my jquery knowlegde isn't that good yet..

Hope someone can help me here !
Thnx
Do Tuan March 5th, 2009 at 8:17 pm
Amazed with your tuts. You're true designer. Keep it up lol
alberto March 16th, 2009 at 9:49 pm
great!
bgd March 19th, 2009 at 12:26 pm
I'm in a problem … how to implement this into joomla?

its working everyting except – active link
Web Designer March 23rd, 2009 at 3:21 am
Absolutely Amazing!
raffy March 23rd, 2009 at 9:05 am
hi Great Tutorial!

Can you integrate it with a dropdown menu? i cant figure it out! :(
kiel March 28th, 2009 at 9:15 am
hey buzzlair …the header is made of JQUERY not flash
fredie March 31st, 2009 at 7:14 am
wow nice tutorial, but i want to ask, how we give different style on the current page like on your site? we can see that the current page on your site has different image (the text is glowing).

thanks
Manuel Graf April 2nd, 2009 at 11:43 pm
Grat, thanks. Also a little Apple Fanboy like me ;)
Well, have a look at http://www.apfelkuh.de/blog.. and main domain is getting even worse ;) (explanation: Apfelkuh ger. : Apfel = Apple, Kuh = Cow, so its Applecow in english…)
Well, but back to topic:
nice Work, gonna use it, iLike.
SirVer April 3rd, 2009 at 4:05 pm
Heya. The very last example (the one with rounded corners) is broken in Safari. The others work just fine. Nice writeup!
chamil April 6th, 2009 at 4:42 am
please tell me how I add the option to show the current link in the menu.It mean if User i home page I need to change the home page link style(highlight).like http://www.kriesi.at/archives/apple-menu-improved-with-jquery this site
nemoprincess April 8th, 2009 at 2:53 pm
Great tutorial and great job. Thank you!
nemoprincess April 9th, 2009 at 8:37 am
How can I highlighting current page link?Can you help me?
Thanks
David.M April 10th, 2009 at 10:59 am
Thanks for your tutorials dude ! keep going :)
Arti April 16th, 2009 at 10:14 am
Wonderful, working in firefox and ie6+. Thanks much.
Pradeep CD April 22nd, 2009 at 8:33 am
Good design and functionality…

thanks..
Paul.G May 11th, 2009 at 11:38 pm
Hey great tutorial just working my way through it now. I notice it doesnt work with chrome that well. on any other browser it is superb!

many thanks
Tyler May 15th, 2009 at 9:43 am
Nice Menu, really nice ;)
Eray May 15th, 2009 at 9:56 am
thanks
Andy Cientista May 18th, 2009 at 11:51 pm
Man this menu is beautiful. Is there any way for it to drop down? I'm thirding the motion that's out there already.. I'm definitely going to use it on my site Capoeira Science. Im ready to reformat the linking structure I like this menu so much but if it could drop down… oh if only.
Brian May 20th, 2009 at 9:30 pm
I have tried implementing this and the slide out feature isn't working for some reason. Anyone have any ideas why this might be?
e May 22nd, 2009 at 5:24 am
å¥½æ¼‚äº®
Flavio May 28th, 2009 at 2:41 pm
having different widths, how is it possible to assign different values to the "max" parameter in the my_kwicks() function? Or is there another way to do that?
TNX
Robin Thomas May 28th, 2009 at 8:31 pm
Dude… Don't have words .. its simply amazing…
Mahdi Montgomery May 29th, 2009 at 11:57 pm
Killer tutorial, very nicely put together. Love your work, thanks.
NdankaMan June 3rd, 2009 at 10:48 pm
You.are.awesome.
Kit MacAllister June 23rd, 2009 at 11:27 am
I just implemented this on my new site design and it looks great. I've really been trying to get into jquery but haven't been able. This article was really easy to follow and super useful! Thanks a lot!
Mehran June 28th, 2009 at 7:43 am
Nice, Thanks.
Ricardo Furtado June 29th, 2009 at 5:55 pm
Great tutorial !! Really helped me out!
Barton June 30th, 2009 at 10:21 am
Hi,

superb tut….
Is there any way, or simple, to make the menu captions textual rather than images? Lot's of work for a multi-lingual website.
Thanks again.
Hashim July 8th, 2009 at 8:20 am
Nice tutorial! very well explained. However in my opinion Myriad Pro Semibold (with crisp setting) matches better than Myriad pro Regular.
Nalin D Jayasuriya July 22nd, 2009 at 12:18 pm
This is a great interactive menu! The use of sprites definitely improves performance. Good job!
Milan August 5th, 2009 at 2:36 am
this is awsome mann,thanx
Raverrr August 5th, 2009 at 10:39 am
Love the script dude. I've integrated it into my website.

Big Index – Australian Business Directory
chigab August 8th, 2009 at 6:52 pm
amazing menu. great job!!
Andrew August 10th, 2009 at 1:16 am
nice work,keep it commin bro
Jerry August 11th, 2009 at 11:49 pm
Awesome tutorial.

Now, how would you do the same thing for wordpress? That would be a good tutorial.
Olga August 18th, 2009 at 9:40 pm
Thanks for this great tutorial! it's really helpfull!
Andy August 24th, 2009 at 9:37 pm
I'm having a hard time understanding how to modify this for my own site. The size in 780px wide, and one of the buttons is much larger than the other 4. Can you please help?
Typemanuel August 26th, 2009 at 12:26 pm
A*M*A*Z*I*N*G

I'll teach this effect to my wed design students.
Thanks a lot.
Typemanuel August 26th, 2009 at 12:26 pm
A*M*A*Z*I*N*G

I'll teach this effect to my web design students.
Thanks a lot.
amir August 26th, 2009 at 6:01 pm
this is gooooood.tnx
Alexey September 2nd, 2009 at 3:51 pm
I've used it for client's cool menu – thank you so much!!!
Srikrishna September 8th, 2009 at 2:18 pm
Thanks, Nice tutorial, useful for many people
Berrez September 17th, 2009 at 3:54 pm
Awesome menu! I need to have 5 items on my menu but my photoshop knowledge isn't so good. I've tried to follow your instructions but no luck..can anyone help me?

Thanks
Web Design Company September 24th, 2009 at 6:31 pm
I love JQUERY and use it on most of the websites..
JewelStruck September 27th, 2009 at 9:28 am
Thanks loved it, will use it for my blog as well. :-)
Jack October 5th, 2009 at 9:39 am
Very nice indeed, will be using this technique for our site soon. Thanks a lot.
games October 14th, 2009 at 9:02 pm
Really cool tutorial, thanks.
ppstylish October 20th, 2009 at 3:53 am
you can add a selected item css
Michael October 23rd, 2009 at 5:41 am
it's very good nice,thank you!!!
Greg November 5th, 2009 at 7:23 am
Excellent menu. I've liked the technique since I saw it in your own nav.
mohan November 19th, 2009 at 7:40 am
thank u very much…
Floric November 19th, 2009 at 8:44 pm
Very helpful! I like it!
abeer November 22nd, 2009 at 4:50 pm
no doubt its really amazing tutorial
mosi December 1st, 2009 at 12:46 pm
Thanks all
ramesh kunwar December 2nd, 2009 at 8:05 am
nice trick…love it
shobi December 2nd, 2009 at 12:37 pm
Hey nice menu =) luks gr8
but can you tell me that how can I make a dropdown in it?
like on mouse hover a drop down menu is shown under the link and when mouse is out the menu is gone…..
can u do that please ?
IEsucks December 3rd, 2009 at 2:34 am
Will this work in IE8 or 7 ? i can not get it to work
Matej Skerjanc December 15th, 2009 at 8:34 pm
Hmm i've followed the tutorial step by step and using this in plain html page it worked flawlessly (mind few errors with picture location address) but doing this in asp.net it wont perform any movement animation. It does change the pic on roll over but without the sliding movement, it just swaps it….any idea anyone
Bockerl December 17th, 2009 at 5:22 pm
Wow, thank you … this has me very helped.
Stephan Schindelin December 18th, 2009 at 5:25 pm
If you want to use the current or active state you have to use an .active class in your css file, or use the sticky event in your java file. Look at http://www.jeremymartin.name/projects.php?project=kwicks for documentation.
Matej Skerjanc December 19th, 2009 at 7:37 pm
Stephan is this refering to my question? I dont really get what he means by "Lastly, note that the "active" (expanded/expanding) kwick is given an extra class of "active". This allows you to specify extra style rules on the active kwick."

thanks in advance
WebDev December 23rd, 2009 at 3:49 am
What’s so great about this menu or jQuery in general? To me this is like going backwards in Web Development.

1. How can this menu be updated from a CENTRAL POINT without having to re-paste the same navigational “li” and “ul” elements on each successive html page? And I don’t want to hear any re-posts about server-side includes either, as most hosting companies worth their salt don’t allow SSI for security reasons. Are we then forced to turn every single page into a dynamic (PHP, JSP, .NET, etc.) page just to be able to use and include statement to update a simple jQuery menu from a central file? Talk about a pain.

2. When JavaScript is OFF or gets turned OFF then jQuery goes buh bye. How is it good that people want to use MORE JavaScript? For years developers and users have been complaining about too much JavaScript being used, lack on scripting consistency between browser engines, security concerns… and here we are PILING it all back on (in jQuery heaps) all over again. Yeah, let’s go backward in web development!

3. jQuery is just an attempt to mimic Flash, so why not just use Flash? Flash doesn’t die when the JavaScript lights go OFF. And Flash can be updated from many central points like text files, databases, or XML files.

From an updating standpoint and from a programming standpoint… I’m just not seeing much to the point of MORE JavaScript (jQuery) in a web world were there is already too much janked JavaScript and where people get upset and kill JavaScript because their browser engine messes it up, or where a security program flips the JavaScript OFF switch, all killing jQuery instantly. jQuery is just more JavaScript… so why are we going backwards in web development with jQuery?
wespai December 28th, 2009 at 7:21 am
thx collect it to

ajax.wespai.com
Montreal Computer Repair December 31st, 2009 at 4:25 am
I found the issue with IE 8 not working. The Javascript breaks on line 27 because "container $(this);" doesn't have var in front of it.

line 27 should be:

var container $(this);

I hope this helps everyone.
Reaskdriese January 5th, 2010 at 6:41 pm
EmereeFep
ypbg
stargroup January 7th, 2010 at 1:36 pm
very nice website
John January 13th, 2010 at 10:17 pm
Hi, this excellent.

I like one of your templates, but would like some slight modifications because I want to add the ecommerce plugin.

Are you available to help with this, please?

Cheers, John
Marcell January 14th, 2010 at 12:57 am
Hey, spent hours browsing the net and finally stopped here. Great Work!!
RomKa January 14th, 2010 at 10:37 am
Great job! I'll use it on my site!! Thanx
swiftsaves January 17th, 2010 at 10:10 pm
Just great ,just what i want.
Ebnat Syukur January 20th, 2010 at 6:15 pm
nice tutorial. thanks a lot
Anoop January 24th, 2010 at 10:51 am
You guys are doing a very generous job by providing these tutorials to us … Tnx a lot
Bill Farraj January 24th, 2010 at 11:25 am
Thank you for this tutorial, i got the idea of sliding the menu bar items, but i didn't even use the photo-shop before, i tried to edit your PSD file to change the textbut it wasn't work out for me.
I know my question is not related to this tutorial, but can you show me how to edit the text, i think that your PSD file is corrupted.
Touch Up Kit January 29th, 2010 at 10:12 am
I've been looking for this exact information on this subject for a while.
Claudiu January 29th, 2010 at 5:16 pm
Very nice menu, I implemented it on my online store. The only issue is that the Lightbox for showing larger images is not working anymore. Any ideas?

http://www.puimic.ro/produse/carucioare/firkon-verano.htm

Thanks.
Claudiu January 30th, 2010 at 9:52 am
Solved. The solution is to use the noConflict() method and replace the custom.js file content with the following:

var $j = jQuery.noConflict();

function my_kwicks(){
$j('.kwicks').kwicks({
duration: 300,
max: 200,
spacing: 0
});
}

$j(document).ready(function(){
my_kwicks();
});

Thanks again and good luck!
sody January 31st, 2010 at 11:31 am
???????????google???????5555
daddy design February 4th, 2010 at 6:01 am
very nice article.. thank you!
Indialike February 8th, 2010 at 11:18 am
Very nice and useful tutorials for web designers,
Thanks for posting.
Maxi February 8th, 2010 at 7:37 pm
Very nice tut dud . good job
A.Jendrysik (Typo3 Agentur) February 10th, 2010 at 1:39 am
Sehr schönes Tutorial! Sehr gute Arbeit.

Gruß aus DE
Matt Kern February 14th, 2010 at 6:42 pm
"Part 6: Holy crap, too much work, I just want to download this and leave"

LMAO! Thanks a bunch. This was perfect for me.
MJ February 17th, 2010 at 4:54 pm
This is awesome!! i did the tutorial, and i modified the psd, css and java to fit the size i wanted. At first it worked perfectly in both FF and IE, but now all of a sudden when i tried running it a couple of hours later it is not working anymore? not sure if i did something i shouldn't have in the mean time, but do you have any suggestions?

once again, great tutorial :)
Sachin February 23rd, 2010 at 1:03 am
I came across common question on jquer kwick apple style, that it does not work properly in firefox. The script is all fine,,, make sure you have referenced to javascript files correctly. On local machine, it looks like "js\custom.js"… change such instances to "js/custom.js"
Mayones March 9th, 2010 at 4:51 pm
Hi.
I'm wondering can you help me making this menu expand vertical insted of horizontal? I know I have to do something in the kwics.js file but I'm not a much of a programer so please, can you help me with this task?

PS. Sorry for my english.