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 (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

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>

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

 .kwicks {
     list-style-type: none;
     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;

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{

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:hover {
	background-position: 0 bottom;
}, #kwick2:hover{
	background-position: -200px bottom;
}, #kwick3:hover {
	background-position: -400px bottom;
}, #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(){
        duration: 300,
        max: 200,
        spacing:  0


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)

  1. First you should add layer guides again for pixel perfect alignment.
  2. Select black as your foreground color and draw a rounded rectangle (8px radius, anti alias:on).
  3. 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%)
  4. Now move rectangle 2 and 4 out of the canvas until you only see the round corners.
  5. 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-position: left 0px;

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

#kwick4 a{
	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:

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

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

Tags: , , ,
428 replies
« Older CommentsNewer Comments »
  1. Firstain
    Firstain says:


    I have a problem. I’m making my own custom WP theme (my first ever) and i thought i’ll use this as my menu. But i just can’t seem to make it appear properly. What do i need to do? Where EXACTLY should i put all the files i downloaded? I just put everything in my theme’s folder and images in another folder called ‘images’ but this is not working. Please help!

    Thanks :)

  2. Oussama
    Oussama says:

    I don’t really like this tutorial. I’m on your blog for a while and I know you can design very well, but this made me dissapointed.

  3. 130dm4n
    130dm4n says:

    Worked great, thank you. Had no problems, other than your javascript did not work, had to adjust your javascript to the following:

    $().ready(function () {
    max: 140,
    spacing: -2


  4. Luxon
    Luxon says:

    Absolutely love it thanks!

    Can anyone help me, same as Rusty mentioned, I want a button to remain pressed down when the linked page opens?

    all best

  5. Dk Mike
    Dk Mike says:

    Hey, thankz for this wonderful tutorial which I really do admire, but can anyone here please and kindly help me out by converting the menu to a drop down menu?Thanks…

  6. adam
    adam says:

    so what if I was designing arabic navigation menu, how can I import starting from right side?

    background-position:-200px 0px; <<this imports it from the left side

    I have tried this
    background-position:100% 0px; <<< it worked but its not so precise

    anyone knows?

  7. Reynaldo Blanchette
    Reynaldo Blanchette says:

    I very discover this a eyeopener. In no way looked at it in this way. If you are heading to write some additional postings about this subject, I definitely will be back soon! Btw your layout is extremely briliant. I’ll be utilizing one thing similar for my own blog if it’s ok with you.

Trackbacks & Pingbacks

  1. […] 17. Create an apple style menu and improve it via jQuery […]

  2. […] Using plug-ins to create and extend the jQuery functionsBuilding the imgPreview jQuery PluginCreate an apple style menu and improve it via jQueryAutoCompleter TutorialAn Introduction to jQuery UI – Part 1What You Need to Know About jQuery […]

  3. […] 28. Apple style menu and improve it via jQuery […]

  4. […] 10. Apple Style Navigational Menu […]

  5. […] Create an apple style menu and improve it via jQuery […]

  6. […] Create an apple style menu and improve it via jQuery […]

  7. […] 苹果风格菜单 | Demo在这个深入教程中,您将创建一个苹果风格豹-文本缩进菜单从头开始。首先,您将建立在Photoshop菜单,然后您可以创建所需的html和CSS,并最终改善与jQuery它。 […]

  8. […] HomeAboutContactCopyright RSS Feed Twitter HomeDesignDevelopmentHtml & CssJQueryResourcesToolsView50+jQuery的导航插件和教程posted by 疯狂小强 at 十月 8, 2010 所属分类 JQuery 3次阅读 发表评论»标签: JQuery, plugins, tutorials google_ad_client = "pub-1947244863247241"; /* 468×15, title创建于 10-8-25 */ google_ad_slot = "5416577290"; google_ad_width = 468; google_ad_height = 15; google_ad_client = "pub-1947244863247241"; /* 300×250, adsence 10-7-7 */ google_ad_slot = "5755027623"; google_ad_width = 300; google_ad_height = 250; 正如我们所知道的,一个新用户访问一个网站时,决定他们去留的关键是最初的15-20秒种。这是至关重要的,你必须遵循统一的风格来设计您的网站,特别是导航的风格,可能性规则,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格。本文列举了45个 jquery的导航插件和教程,演示通过jquery实现一些导航效果,教您如何做一个有创造性和易于使用的导航。横向菜单导航插件和教程Mega Drop Down Menu w/ CSS & jQuery | Demo一个完善的多级导航栏 | Demo 在本教程中,作者说明了实施完善多层次的导航栏使用html,css和不显眼的javascript的使用jQuery的一些代码行来显示和隐藏小节他的方法。使用子画面创建导航菜单 | Demo 精灵的css可以大大提高网站的性能,使用jQuery,我们可以很容易地实现真棒过渡效果。标签导航光滑水平滑动 在本教程中,您将创建一个导航菜单幻灯片水平。它从一个“标签上包含的元素的右边”设置。当点击一个标签幻灯片左侧显示的链接组。再次点击该标签,它滑出。droppy – 巢式下拉菜单 这不是最灵活的插件,但如果你正在寻找一个基本的菜单,它是完美的。 jQuery Listmenu | Demo 这jQuery插件允许您方便地转换为长期,难以导航到一个紧凑,易于脱脂首字母为基础的菜单系统,可以快捷进出双向访问数百个项目名单。Kwicks for jQuery | Demo创建CSS&jQuery的导航菜单 在本教程中,您将学习如何建设顺利滚动使用jQuery和scrollTo插件影响一个css导航菜单。苹果风格菜单 | Demo 在这个深入教程中,您将创建一个苹果风格豹-文本缩进菜单从头开始。首先,您将建立在Photoshop菜单,然后您可以创建所需的html和CSS,并最终改善与jQuery它。性感下拉菜单瓦特/ jQuery的&的CSS | Demo 大部分下拉菜单看上去美观,但发展中国家他们适度地降低也很重要。在本教程中,作者展示了如何创建一个性感的下拉菜单中缓慢下降。使用jQuery超级下拉菜单 | Demo 一个大型的建议盘旋下降时,下拉菜单是0.5秒,另有0.5秒钟的延迟当用户移动鼠标了。这些准则,作者演示了如何建立一个大型的下拉可利用的时间延迟菜单。JQuery Pager | Demo jQuery的传呼机是一个简单的jQuery插件提供分页功能,数据驱动的Web应用程序。简单的jQuery下拉 | Demo jQuery的菜单不必很复杂,有时你可能想尝试使它们的东西略有不同尽可能地简单。此菜单插件,剥去了以最少的样式代码,但仍通常需要的所有功能。 平滑动画菜单与jQuery | Demo 在本教程中,您将学习如何建立一个jQuery菜单和一些可爱的动画和平稳影响它 Query的缓和插件.时尚导航菜单使用jQuery | Demo In this menu tutorial there are three main classes that define the looks: normalMenu – for the normal state of the navigation links, hoverMenu – lighter link that slides down on hover, selectedMenu – the active (selected) state.易风格jQuery的下拉式菜单 | Demo 本教程将告诉您如何创建一个简单易风格与悬停鼠标事件和最基本的jQuery的动画使用slideUp和slideDown菜单。A Different Top Navigation | Demo 如果您想使您的网站脱颖而出,您可以考虑不符合“规范”当谈到导航思想。在本教程中,您将正在这样做,通过创建不同的多层次的横向导航系统,它还是不够直观,任何人使用第一次。Vimeo-Like Top Navigation | Demo If you’ve ever visited the Vimeo 主页您可能已经注意到在下拉菜单当你在搜索框上方盘旋,为你提供不同的搜索选项来缩小搜索范围。您将学习如何重新在本教程这种效果。jQuery’d Bread Crumb – jBreadCrumb 这种可折叠的面包屑jQuery插件已经开发出来,处理深层嵌套的,冗长命名的网页。而不是限制在断绝方面表现出的元素数量,发展商选择顺应了可用性和搜索引擎优化客户端解决方案。它也被证明是好看和好玩的。idTabs 在不平凡-插件多功能idTabs使得添加标签,一个网站非常简单,打开了无限的可能性导航大门。这个插件网页显示您不仅是多么容易idTabs使用和风格,而且还证明了导航选项您将有许多供您使用。按键导航 | Demo 使用jQuery,您的网站的导航不必局限于鼠标的激活。在这个高度,原实验教程您展示了如何让用户浏览您的网站使用的键盘。jQuery的滑动菜单 | Demo 在本教程中,您将学习如何创建一个滑动菜单按钮,类似的效果,您可以看到在行动上PSDtuts超过+网页。当按钮被点击时如果要全面铺开一箱的链接,当单击按钮再次框充分回滚英寸.google_ad_client = "pub-1947244863247241"; /* 300×250, adsence 10-7-7 */ google_ad_slot = "5755027623"; google_ad_width = 300; google_ad_height = 250; 下拉,iPod的细目,并飞出样式 这种iPod风格的菜单插件提供的任何级别的数量嵌套结构的复杂轻松导航。整个菜单位于内固定大小的区域,当一个节点默认选中的“返回”链接,似乎使导航上一个(父)菜单下面的菜单。Flickr菜单设计 | Demo 这是一个简单的分步教程将告诉您,如何实现一个Flickr风格的冷滑使用jQuery和CSS效果菜单。 固定淡出菜单 | Demo 本教程的目的是建立一个固定的导航遵循用户时,向上或向下滚动,只有巧妙地显示了淡出,成为几乎透明本身。当用户在它盘旋,然后在菜单变得不透明了。导航包括一些链接,搜索框,顶部和底部的按钮,让用户浏览到顶部或页面底部。 | Demo mb.menu是一个强大的jQuery的组件,可以帮助您建立一个直观的多级树菜单或上下文(右键)菜单。您可以添加您想要多子,如果您的子菜单或菜单不在网页宣布,该组件将得到它通过Ajax,调用模板的菜单中,您需要(数值身份证页面上的“菜单“属性)。mcDropdown 该mcDropdown插件是一个UI控件,让用户选择一个复杂的分层树的选择,允许为鼠标和键盘输入。这个插件的整体效果,有点像在Microsoft Windows“开始”>所有程序“菜单。垂直或补充工具栏插件和教程简单的jQuery折叠菜单 | Demo 这是一个非常简单的折叠菜单插件使用jQuery兴建。与小组联系,他们将扩大在子菜单中点击和项目时,不具备分项目的正常联系的项目。菜单将初始化的第一个扩展子菜单。标签式结构菜单 | Demo 本教程将告诉你如何构建自己的节省空间,标签式界面,使用jQuery与slideDown / slideUp影响。最新的内容可折叠菜单 | Demo 在本教程中,您可获得如何构建一个简单的,但引人注目的是CSS,jQuery和花式效果的插件帮助缓解折叠效果。水平滚动菜单 | Demo 本教程教你如何创建一个水平滚动菜单,滚动自动根据您的鼠标轴辎运动和使用jQuery.color plugin to animate the background-color changes.Create a Slick Tabbed Content Area using CSS & jQuery | Demo 在此啧啧您将学习如何建立一个简单的小标签在HTML信息框中,然后它使用纯javascript功能,最后你会学到的方法达到同样的效果使用jQuery。Slide Out and Drawer Effect | Demo 苹果网站是这一行动的作用有很大的示范鼠标就’节’和相关的链接标题平息暴露。是什么使这种效果格外清凉的是,抽屉保持一个固定的高度和禁区之间的幻灯片。“Outside the Box” Navigation with jQuery | Demo This tutorial offers three different ‘out-of-the-box’ OS X dock-style navigation options. There are the, as expected, horizontal and vertical examples, and finally the very cool OS X stack and drop stack.Sproing! – Thumbnail Menu | Demo Sproing! is a plugin that creates an elastic effect for your navigation that magnifies the menu items when they are hovered over.Cool Animated Navigation | Demo In this tutorial you’ll learn how to build a really cool animated navigation menu with background position animation using just CSS and jQuery.jQuery File Tree | Demo jQuery File Tree is a configurable, Ajax file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.Creating a Floating HTML Menu Using jQuery and CSS | Demo For all of us who deal with long web pages and need to scroll to the top for the menu, this tutorial offers a nice alternative: floating menus that move as you scroll a page. This is built using HTML, CSS and jQuery, and it’s W3C-compliant.BDC DrillDown Menu, an iPod-style menu | Demo A drill-down menu takes up constant space like an accordion menu but offers the deep hierarchy of a fly-out menu at the same time. Because of this, it not only features a small footprint but is also easier to navigate than a fly-out menu, where more mouse movement and accuracy are required.jQuery Context Menu Plugin | Demo The goal of this plugin was to streamline the way actions bind to menu items and to use 100% CSS for styling. Keyboard shortcuts have been added for navigation once the menu is opened, and there are five methods that will allow you to control and clean-up your context menu on the fly.A ‘Mootools Homepage’ Inspired Navigation | Demo This tutorial takes you through the process of developing the menu that had previously been used on the homepage of MooTools, but with jQuery.jQuery UI Selectmenu 界面Selectmenu的jQuery插件的设计重复和扩大选择一个本地的HTML元素的功能,并允许您自定义的外观和感觉,添加图标,并选择内建立层次结构。最棒的是,它的建成与逐步加强,并考虑获得和允许所有本地的鼠标和键盘控制。 美丽滑出导航 | Demo 在本教程中,您显示了如何创建一个惊人的滑出式菜单或导航。导航将几乎隐藏 – 项目仅滑出时,对该地区的未来给他们的用户左右。这给出了一个漂亮的效果,使用这种技术可以节省您在网站上一些空间。可选水平或垂直导航光滑导航菜单 这个菜单的内容可以是达成无论从网页上直接标记,或外部文件,并通过Ajax的牵强。并jQuery的,可配置,时尚“幻灯片加淡出”由于是过渡期间适用的分菜单揭幕。菜单同时支持横向和纵向(侧栏)的方向。Superfish – Suckerfish on ‘roids | Demo 您可能还会喜欢15款提高表格操作的jQuery插件12网站帮你学习Flash/ActionScript75个最佳Web设计资源24款Firefox插件21个为您的网站和博客提供的免费视频播放器7个神奇的jQuery 3D插件十大最佳WordPress插件推荐jQuery3D全景效果展示插件20开发者和设计者必备的Firefox插件 25个有用的jQuery Tooltip插件原文地址:45 jQuery Navigation Plugins and Tutorials本文永久链接地址:欢迎转载,转载请注明来源于我爱互联网,多谢合作!下一篇: 10个ico搜索下载网站 我要发表评论发表评论 点击这里取消回复姓名 (必填)Mail (不会被公开) (必填)网站 […]

« Older CommentsNewer Comments »

Comments are closed.