Create An Apple Style Menu Purely In CSS3 – No Images Required

This just goes to show you how much of a difference CSS2 and CSS3 are and how much more CSS3 can do for us to cut our design work literally in half. In this tutorial I will show you how to create a non-image, apple style menu all out of CSS3! The only problem with this is doing so you are limiting the amount of browsers that will be able to correctly display your work (Firefox and Safari only). So you would want to make sure to have alternatives for other browsers (meaning you WILL have to use images and alternate code).

view demo
Apple Menu

download
Zip Package

The advantage of doing all this is CSS3 is that it significantly reduces the load amount for the page, the lower the better. It not only helps the load time but reduces the cost of bandwidth used. And of course cause it’s really cool!

Step 1

First, we’re just going to start off by creating a simple horizontal list with links that have padding and text effects. Also make sure to add the class active to our index link.

HTML

	<div id="menu">
		<ul>
			<li><a class="active" href="index.html">home</a></li>
			<li><a href="menu.html">menu</a></li>
			<li><a href="project.html">projects</a></li>
			<li><a href="affiliates.html">affiliates</a></li>
			<li><a href="contact.html">contact</a></li>
		</ul>
	</div>

CSS

body	{
	background: #ddd;
	margin: 30px;
}
#menu	{
	float: left;
	padding: 0;
	margin: 0;
}
#menu ul	{
	padding: 0;
	margin: 0;
	float: left;
}
#menu li	{
	float: left;
	list-style: none;
	background: none;
}
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
	color: #262626;
	text-decoration: none;
	text-transform: capitalize;
	padding: 12px 28px;
}

This is what it should look like so far..

Step 2

In the next step, we’re going to add our gradient effect to our links and also add a text shadow for an embedded look.

To do this, we use the following code to encompass Firefox, Safari and what ever other browser that supports css3.

#menu li a:link, #menu li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
	color: #262626;
	padding: 12px 28px;
	text-decoration: none;
	text-transform: capitalize;

	/* CSS3 Text Shadow */
	text-shadow: 0px 1px 1px #fff;

	/* CSS3 Background Gradient */
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}

Again, here’s what we got so far..

Step 3

Now we’re going to add another new CSS3 attribute called border radius which rounds out the corners of our links on each end of the side. We do this by also using the first-child and last-child.

#menu li:first-child a {
	/* Rounded Corners */
	-moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
}
#menu li:last-child a {
	/* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

Step 4

We’ll now add some final touches to our first part of the menu, some more shadowing and horizontal border gradients.

On the menu div, we’re going to add a box shadow and round out the corners so it matches our links.

#menu	{
	float: left;
	padding: 0;
	margin: 0;

	/* Box Shadow */
	box-shadow: 0 1px 0 #000;
	-moz-box-shadow: 0 1px 0 #000;
	-webkit-box-shadow: 0 1px 0 #000;

	/* Rounded Corners */
	-moz-border-radius-topleft: 10px;
     -moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;

	/* Rounded Corners */
     -moz-border-radius-topright: 10px;
     -moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

Now we’re going to add a 1px margin to the right of our li to create a space so the background of our ul will show through.

#menu li	{
	float: left;
	list-style: none;
	background: none;
	margin-right: 1px;
}

Now add the gradient to the ul background.

#menu ul	{
	border-top: #f3f3f3 1px solid;
	padding: 0;
	margin: 0;
	float: left;

	/* Background Gradient */
    background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}

So far so good..

Step 4

Now we’ve got to add our hover event and our active state. Pretty simple, same code just different selector.

#menu li a:hover	{
	cursor: pointer;
	color: #fff;
	text-shadow: 0px -1px 1px #000;

	/* Background Gradient */
    background-image: -moz-linear-gradient(top, #929292, #545454);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}

And for the active state..

a.active:link, a.active:active, a.active:visited	{
	color: #fff !important;
	text-shadow: 0px -1px 1px #000!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;

	/* Box Shadow */
	box-shadow: inset 0 0 10px #000;
	-moz-box-shadow: inset 0 0 10px #000;
	-webkit-box-shadow: inset 0 0 10px #000;
}

*Note for the active state to work, for each page you have the menu you on say contact.html you need to attach the class active to the proper link in the menu bar.

Final Result

view demo
Apple Menu

download
Zip Package

Final Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple Menu In CSS3 Only</title>
<style type="text/css">
body	{
	background: #ddd;
	margin: 30px;
}
#menu	{
	float: left;
	padding: 0;
	margin: 0;

	/* Box Shadow */
	box-shadow: 0 1px 0 #000;
	-moz-box-shadow: 0 1px 0 #000;
	-webkit-box-shadow: 0 1px 0 #000;

	/* Rounded Corners */
	-moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;

	/* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}
#menu ul	{
	border-top: #f3f3f3 1px solid;
	padding: 0;
	margin: 0;
	float: left;

	/* Background Gradient */
    background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}
#menu li	{
	float: left;
	list-style: none;
	background: none;
	margin-right: 1px;
}
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
	color: #262626;
	padding: 12px 28px;
	text-decoration: none;
	text-transform: capitalize;

	/* CSS3 Text Shadow */
	text-shadow: 0px 1px 1px #fff;

	/* CSS3 Background Gradient */
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}
#menu li a:hover	{
	cursor: pointer;
	color: #fff;
	text-shadow: 0px -1px 1px #000;

	/* Background Gradient */
    background-image: -moz-linear-gradient(top, #929292, #545454);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}
#menu li:first-child a, #menu ul {
	/* Rounded Corners */
	-moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
}
#menu li:last-child a, #menu ul {
	/* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}
a.active:link, a.active:active, a.active:visited	{
	color: #fff !important;
	text-shadow: 0px -1px 1px #000!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;

	/* Box Shadow */
	box-shadow: inset 0 0 10px #000;
	-moz-box-shadow: inset 0 0 10px #000;
	-webkit-box-shadow: inset 0 0 10px #000;
}
</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li><a class="active" href="index.html">home</a></li>
			<li><a href="menu.html">menu</a></li>
			<li><a href="project.html">projects</a></li>
			<li><a href="affiliates.html">affiliates</a></li>
			<li><a href="contact.html">contact</a></li>
		</ul>
	</div>
</body>
</html>

CSS, CSS3, HTML, Tutorial, Web Design

Jul

07 22 Comments made, post one now! We love comments.

johan

July 11th, 2010
4:49 am

nice one. But the left and right side looks awfull when active
Chris

July 11th, 2010
5:30 am

you could fix the two sides using the css3 selectors #menu ul:first-child and #menu ul:last-child add rounded edges to the li elements.
i guess this should fix the problem.
Chris

July 11th, 2010
5:37 am

edit: sorry, I see you did that already.
Justin

July 11th, 2010
11:40 am

Thanks for the comments guys! Yeah, this tutorial was purely made for demonstration on how well css3 can use graphics. The only browsers that fully support this is Firefox and Safari. If your looking at it in any other browser, most likely will be broken. As Jonah said, the left and right are broken when active – this looks like your viewing it in Chrome I assume. This is because it doesn’t support first/last child with border radius.

There are fixes that can be done to be cross browsers compatible but that would defeat the point of this tutorial!

Thanks guy and keep reading!

- Justin
направа на сайт

July 12th, 2010
2:05 am

Wow with css. Amazing man
Lewis

July 12th, 2010
2:19 am

I usually avoid commenting on code when someone is demo’ing a technique but your ul need not be in a div as you can make the ul id=menu and remove the div completely avoiding unnecessary mark up. Alternatively update your to a and use html5.

Looks great in safari and chrome and I am sure I’ll make use of your css at some point. So big thanks for your hard work!
Lewis

July 12th, 2010
2:21 am

Omissions: *Alternatively update your div to a nav and use html5.
CSS3 Techniques And Tutorials

December 6th, 2010
10:39 am

[...] 10/12/10 */ google_ad_slot = "0704558884"; google_ad_width = 300; google_ad_height = 250; 1) create-an-apple-style-menu-purely-in-css3-no-images-required2) create-a-sticky-note-effect-in-5-easy-steps-with-css33) [...]
38 Best CSS3 Tutorials and Techniques Of Year 2010

December 30th, 2010
4:48 am

[...] demystifying-css12) applying-lessons-from-css-frameworks13) css-white-space14) Create an Apple Style Menu Purely in CSS3 no Images Required15) Create a Sticky Note Effect in 5 Easy Steps with CSS316) How to Create a Customizable Dock with [...]
Michael

January 6th, 2011
6:21 am

Awesome stuff!!

Does anyone made this work on IE7/8 ?? I did not check that issue in that (horrible) browser before implementing, and now I see it does not show any backgrounds :/

Help!
Justin Mathew

January 7th, 2011
10:42 am

Hey Michael,

As of right now IE6/7/8 do NOT support CSS3, there are fixes for these but the purpose of the article was to show the power of CSS3. Some browsers, like Chrome, still don’t fully support CSS3 either. Meaning the only browsers this technically should work in is Firefox 3+ and Safari.

Again, there are plenty of fixes out there that can be done to make this work in all browsers, it just defeats the point of this specific article because then we would have to implement images for our fallbacks.
Michael M.

January 7th, 2011
11:18 am

Thanks Justin!

I’ll check on the fixes and let you know how it turned out!
Web Design Company India

April 20th, 2011
9:43 pm

WOW, really nice, thanks for share.
Adam Rotmil

May 12th, 2011
9:46 pm

This is cool! I’m helping at one company now, doing web design in Japan, and the standards here have not really caught up with what’s “going on” in the dev world. So, I spend a lot of the days looking at tutorials to see how it’s going to have to be done, when one day, kicking and screaming, things are going to get phased out and all web designers are going to have to use these methods. I think the end of tables, and now to an extent, end of images, is a very good thing. Then, more content like relevant video or maps, which are actually part of the overall web body of knowledge. Hey, what do you think of this idea — basically, I’m thinking that eventually it won’t really matter to have “a website” per se. That is, a central web site won’t really be as important, nor the “how to people find me” etc, but instead companies can decentralize their content and just get it out there and let people who are interested find it because it’s relevant. It’s a thought. Also curious to hear what you think about the eventual end of HTTP as the prevailing protocol. Future of the web, man!

Thanks for writing this.

Adam

Adam Rotmil Partners
raman

June 14th, 2011
5:45 am

how to use dropdown menu in is beautiful menu
Justin Mathew

June 17th, 2011
10:39 am

Hey Adam Rotmil,

First, I’d like to thank you for visiting us and taking the time to comment with viable substance. You touch on some great topics in that some still stand unanswered in the web dev world, one example being web standardization. The problem with progressive enhancement is we have to leave old (obsolete) code usable for those exactly in your situation; Where a company relies on out dated code either because they don’t have the resources to hire someone or they’re just simply not educated about the topic or they just happy with what they have.

If you follow the trends of our browsers you can see how, exactly what you stated, we’re slowly phasing out obsolete code and starting to implement more current code (HTML5/CSS3). This will be a long road to go down before we can say “Hey, look, let’s all benefit here and make one standardization with web coding”, which Google, Firefox and Safari they are somewhat playing nicely and trying to work with each other – it’s the outcast aka IE (Microsoft) who doesn’t like to play nice and think their way is the better way, which ruins it for everyone.

As far as your idea, I think you got the right idea but your wordage is opposite. You can see just the beginning trending of the newly ‘cloud’ structure where everything IS centralized and can be accessed anywhere via internet connection. I wouldn’t go as far as saying this is what everything is going to come down to because I, myself, am a firm believer in not giving full disclosure to companies with my information (which is exactly what you’re doing by implementing cloud data.) Remember, your data has to be held somewhere and if it’s being held somewhere it’s using resources and if it’s using resources then someones paying for it to be there which in return means getting rid of separate website entirely and giving access to everyone won’t happen, you could make the same assumption with internet. theoretically more and more companies offer free wifi but it’s still being paid for and won’t become free for everyone.

I also don’t see HTTP going anywhere, this in itself is merely an objective way for accessing a call to the server, could there be possible improvement on this protocol? Probably. Will the HTTP die off and be replaced with something more efficient? Again, probably not, if anything, I would say it would just be improved from it’s current stand point.

Take care Adam and hope to see you around!

- Justin
Filippo

July 15th, 2011
2:32 am

Thanks for this awesome stuff!

But i have a question: i’m approaching html’s world and i can’t center the menu! How can i? hopw you’ll reply me soon!
Justin Mathew

July 15th, 2011
7:31 am

Hello Filippo,

There are a few different ways on how to center certain items but in this sense you would have a wrapper div outside of this menu (usually your 940/960px div) and just set the menu css to margin: 0 auto;

- Justin
109 interesantes tutoriales y recursos CSS3 | Digisolnet Blog

July 30th, 2011
1:44 am

[...] Crear un menú al estilo Apple totalmente en CSS3 [...]
CSS3 Tutorial and Resoruces | Avazio

August 17th, 2011
4:54 am

[...] to create a customizable dock with CSS3 • Halftone navigation menu using jQuery and CSS3 • Create an Apple-style menu purely in CSS3 • Slide down box menu • Make an elastic thumbnail menu • Awesome cufonized fly-out menu [...]
anju

September 19th, 2011
2:31 am

very nice tutorial . i’ll be using it for my next personal site . last week i impremented a CSS 3 Drop Down Menu for one of my client . i wish i could stumble upon this article before .anyway , bookmarked
30 CSS Tutorial | CSS Radar - Best Collection of CSS Tutorials on the Web

December 11th, 2011
9:41 pm

[...] 14.Create An Apple Style Menu Purely In CSS3 – No Images Required [...]

Click here to cancel reply.

We're a new design company offering free tutorials and new insight on web design. We seek out the most up-to-date information and fresh designs.

We can help you take your buisness to the next level with new age code and design. Don't be left behind, contact us today for a free quote!
Advertisements:
Subscribe
Live Updates
Ajax CSS CSS3 Downloads Drawing Fonts Freebies Graphic Design HTML Icons Illustrator jQuery Tutorial Twitter Vectors Web Design
Advertisements:

Create An Advanced Chinese Lanter...
December 13, 2010 by Justin Mathew
100+ Free High Quality Web Design...
August 31, 2010 by Justin Mathew
Create An Apple Style Menu Purely...
July 7, 2010 by Justin Mathew
How To Draw A Glossy 2.0 Loading...
June 30, 2010 by Justin Mathew

view more »

5 jQuery Must Have Code Snippets...
If you haven't heard of jQuery yet, than you ...
Create An Apple Style Menu Purely...
This just goes to show you how much of a diff...
Add A Custom Ajax Twitter Feed To...
A lot of people like to add a twitter feed to...
How To Draw A Glossy 2.0 Loading...
In this tutorial we're going to show you how ...

view more »