Apple Navigation with CSS3

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.

The Markup

<ul id="nav">
	<li><a href="#" class="apple"><span>Apple</span></a></li>
	<li><a href="#">Store</a></li>
	<li><a href="#">Mac</a></li>
	<li><a href="#">iPod</a></li>
	<li><a href="#">iPhone</a></li>
	<li><a href="#">iPad</a></li>
	<li><a href="#">iTunes</a></li>
	<li><a href="#">Support</a></li>
	<li class="search_container">
		<form class="search" method="get" action="#">
			<label for="search">
				<input type="text" id="search" placeholder="Search" />
			</label>
		</form>
	</li>
</ul>

I wanted to keep it very light weight and semantic. Using an unordered list is fairly standard for a navigation system and I’m not really breaking new ground here.

I built this with an additional class named “current” which will set when you are viewing a specific page.

The CSS

#nav {
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#cacaca), to(#848484));
	background:-moz-linear-gradient(top, #cacaca, #848484);
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);
	display:inline-block;
	list-style:none;
	margin:0 0 20px;
	overflow:hidden;
	padding:0;
}
#nav li { border-right:1px solid #808080; -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); float:left; }
#nav li a { color:#262626; display:block; font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; height:36px; line-height:34px; padding:0 30px; text-decoration:none; text-shadow:0 1px #cecece; }
#nav li a:hover { background:-webkit-gradient(linear, 0 0, 0 100%, from(#929292), to(#535353)); background:-moz-linear-gradient(top, #929292, #535353); -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); color:#fff; text-shadow:0 -1px #414141; }
#nav li a:active { -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); }
#nav li .apple { padding:0; }
#nav li .apple:hover { -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; }
#nav li .apple span { background:url(images/apple.png) center 6px no-repeat; display:block; padding:0; text-indent:-99999em; width:102px; }
#nav li .current,
#nav li .current:hover { background:-webkit-gradient(linear, 0 0, 0 100%, from(#373737), to(#525051)); background:-moz-linear-gradient(top, #373737, #525051); -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); color:#fff; text-shadow:0 1px #242323; }
#nav .search_container { border-right:none; padding-right:5px; }
#nav .search { background:url(images/site-search-sprite.png) right -53px no-repeat; padding:7px 20px 8px 5px; }
#nav .search label { background:url(images/site-search-sprite.png) 0 0 no-repeat; display:block; height:20px; }
#nav .search input { border:none; color:#a9a9a9; height:12px; margin-left:25px; -webkit-appearance:none; }
#nav .search input:focus { border:none; outline:none; }

Things to note in the CSS would be multiple box-shadow properties.

-webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1);

The above code is used for the active state. This is triggered when you click one of the buttons. You can see I have chained three different styles to one property using a comma separated list. I tend to use box-shadow a lot to add a lot of detail to the end result. The great thing about using CSS rather than slicing images is the amount of time I saved.  I was able to put this example together in a few hours.  In fact it has taken me longer to write about what I’ve done that it actually took to create it. I think that says more about me as a writer than it says about my programming skills, but that’s not the point! :)

Making it work on Mobile Safari was something I wanted to get right this time. I did some low level Googling and found the -webkit-appearance property.

-webkit-appearance:none;

By setting it to ‘none’ I am able to remove the rounded corners and inner shadow from the element.

The JavaScript

I was able to use some code from my last posting and tweak it a little bit to give it some extra functionality.

$(function() {

	var $placeholder = $('input[placeholder]');

	if ($placeholder.length > 0) {

		var attrPh = $placeholder.attr('placeholder');

		$placeholder.attr('value', attrPh)
		  .bind('focus', function() {

			var $this = $(this),
				$form = $this.parents('.search');

			if($this.val() === attrPh)
				$this.val('').css('color','#333');

			$form.addClass('focus');

		}).bind('blur', function() {

			var $this = $(this),
				$form = $this.parents('.search');

			if($this.val() === '')
				$this.val(attrPh).css('color','#a9a9a9');

			$form.removeClass('focus');
		});
	}
});

What does this script do? Well to start I define my variables, which is a great practice to get into. I use $ in front of my variables to let me know I’m dealing with a jQuery object. I think check to see if any of those objects exist on the page. From there it’s pretty simple.  I grab the placeholder value and duplicate it as a value attribute.  On focus, or when you click into the text field, I’m checking to see if the text in the field matches the text that was in the placeholder attribute.  If they are the same then I remove the text. Then I find the parent form and set it’s class to “focus” which toggles the style of the blue outline around the search box.

It’s important to note that since this is a demo I grabbed the sprite image from Apple’s website for the search box, saving a local copy to not burn their bandwidth. So while you are, as always, free to copy all my code please note that I do not own the image used for the search box.

I wanted to thank everyone for the great feedback I’ve been receiving lately. It’s so much fun writing these examples and I really enjoy see what everyone has to say about them.  If you have anything that you want to see please let me know in the comments. Please feel free to grab this code or the code from the demo and play with it.  Enjoy!

25 thoughts on “Apple Navigation with CSS3

  1. Very nice solution, but there is no fallback for browsers like the Internet Explorer. But there excist some way to give browser like the IE a gradient.

    /* IE5.5 – IE7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFCCCC, endColorstr=#FF0000);

    /* IE8 */
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFCCCC, endColorstr=#FF0000)”;

  2. Pingback: Replaceholder jQuery Plugin | Design in Development

  3. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.45) - Speckyboy Design Magazine

  4. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.45) « Vision

  5. Pingback: The Ultimate Roundup of 55+ CSS3 Tutorials

  6. Pingback: The Ultimate Roundup of 55+ CSS3 Tutorials | luLUXE

  7. Pingback: The Ultimate Roundup of 55+ CSS3 Tutorials « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

    • To make the menu vertical you would un-float the #nav li

      Since the LI element is a block level element they will stack right on top of each other. If you have Firebug installed with Firefox or you are using Chrome then you can inspect the demo and toggle the float property to see it working.

    • To make vertical with the same style in css coding in #nav – under that display – don’t mention any thing, because they are mentinoned “block” that is the reason they got that result …
      don’t mention anything then it will remain vertical menu with same effect…

  8. Pingback: 20+ Best CSS3 Tutorials | Free Resources for Designers & Developers

  9. Pingback: Top 100 Useful And Detailed CSS3 Tutorials And Techniques »

  10. Pingback: 21 of Best jQuery And CSS3 Tutorials

  11. I was looking for something like this for my new blog. Clean design, easy to implement. To make this work in IE would you need to create the entire thing in javascript?

  12. Pingback: 55 Super Powerful jQuery Navigation and Menu Plugins « batusy

  13. Pingback: Make your Website Attractive Using CSS3 Tutorials - Snippets, Templates, API and the best developer content - codemaniac | codeManiac - Snippets, Templates, API and the best developer content

  14. Pingback: Top 100 Useful And Detailed CSS3 Tutorials And Techniques - MegaTeacher | Let's start learning

  15. Pingback: 55 jQuery Navigation and Menu Plugins | DumasLab.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>