Apple style Navigation menu

This is a cool navigation bar which is inspired from apple.com. This free version does not include drop-down menus. (Apple style Navigation Pro does include Drop-down menus.) Each menu is fixed ad 100px width. You can add menus as many as you want.

* This widget is also included in Pro Pack. Pro versions enable users to save and load their code with additional customizable options (+ google custom search, drop-down menus, and custom images).

Preview

Build your own

Input data in the fields below.
Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
Paste the source code into HTML snippet in iWeb. (Non-iWeb users can get an iFrame code by clicking "Make an iFrame" button.)

* Customize styles (The widget width will be automatically set according to the number of menu.)

width font family current index

* Insert contents

top menu link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
#menu-container {
	/*widget_width*/width:500px;
	/*widget_height*/height:37px;
}

#navigation-menu{
	position:relative; display:block; width:100%; height:35px; margin:0px; padding: 0px;
	-khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
	-khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px;
	/*font_size*/font-size:12px;/*font_family*/font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;line-height: 35px; text-decoration: none; z-index:199;
}
/* VML FOR IE */
v\:roundrect,
v\:fill { behavior:url(#default#VML); }
#navigation-menu-roundrect,#navigation-menu-fill { display:block; position:absolute; width:100%; height:35px; top:0; left:0; z-index:2; }
#navigation-menu-shadow {  display:block; position:absolute; width:100%; height:35px; top:-1px; left:-2px; z-index:1; -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)"; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); }
#navigation-menu ul{height:35px;list-style:none;margin:0;padding:0;position:relative; display:block; margin:0; padding:0; zoom:1;}
#navigation-menu li{float:left;padding:0px;display:inline;text-align: center;color: white;}
#navigation-menu li a{color:#cccccc;display:block;margin:0px;height:35px;overflow:hidden;background:url('https://lh3.googleusercontent.com/-QODGPvBxdKc/UXdD4tdof8I/AAAAAAAAAIw/-YkDg0SeqfI/s300/top_navigation.png') no-repeat;color: white;text-align: center;width:100px;background-position:100% 0;outline:none;text-decoration: none;}
#navigation-menu ul li.item-first a { width:100px; background-position:0 0; }
#navigation-menu ul li.item-first a.before { background-position:0 -35px; }
#navigation-menu ul li.item-first a:hover,#navigation-menu ul li.item-first a:focus  { background-position:0 -70px; }
#navigation-menu ul li.item-first a:active { background-position:0 -105px; }
#navigation-menu ul li.item-last a { width:100px; background-position:-100px 0; }
#navigation-menu ul li.item-last a.before { background-position:-100px -35px; }
#navigation-menu ul li.item-last a:hover,#navigation-menu ul li.item-last a:focus { background-position:-100px -70px; }
#navigation-menu ul li.item-last a:active { background-position:-100px -105px; }
#navigation-menu ul li a.before { background-position:100% -35px; }
#navigation-menu ul li a:active { background-position:100% -105px; }
#navigation-menu ul li a:hover,#navigation-menu ul li a:focus,#navigation-menu ul li:hover a{background-position:100% -70px;color:#FFFFFF;text-decoration:none;}
#navigation-menu ul li.item-first a:hover,#navigation-menu ul li.item-first a:focus,#navigation-menu ul li.item-first:hover a{background-position:0 -70px;}
#navigation-menu ul li.item-last a:hover,#navigation-menu ul li.item-last a:focus,#navigation-menu ul li.item-last:hover a{background-position:-100px -70px;}
#navigation-menu ul li a.current,#navigation-menu ul li a.current:hover {width:100px;background-position:100% -140px;}
#navigation-menu ul li.item-first a.current,#navigation-menu ul li.item-first a.current:hover {width:100px; background-position:0 -140px;}
#navigation-menu ul li.item-last a.current,#navigation-menu ul li.item-last a.current:hover {width:100px; background-position:-100px -140px;}
</style>

<script type="text/javascript">
/* don't change this script line */
var touch_mode=false;function getparentID(){var a="";try{if(window.top.document == document || typeof(window.top.document.domain)=="undefined"){return a}}catch(err){return a}var ifs = window.top.document.getElementsByTagName("iframe");for(var i = 0, len = ifs.length; i < len; i++) {var f = ifs[i];try{var fDoc = f.contentDocument;if(fDoc === document) {if(f.id.indexOf("widget")==0 && f.id.lastIndexOf("frame")==(f.id.length-5)){b=f.id.split('-');a=b[0]}else{a = f.id}break}}catch(err){}}return a}$(document).ready(function(){if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))||(navigator.userAgent.match(/iPad/i))){touch_mode=true}var e=window.top.document;fullurl=e.URL.split("/");var c=fullurl[fullurl.length-1];if(c.length==0 && fullurl.length > 4){c=fullurl[fullurl.length-2];}c=c.replace(/\./g,"\\.");var b=false;if($(".current").size()==0){$("#navigation-menu>ul>li").each(function(f){var g=$(">a",this);if(isCurrentpage(this,c)){g.addClass("current");return false}if($("ul li",this).size()>0){g.addClass("dir")}$("ul li",this).each(function(h){if(isCurrentpage(this,c)){g.addClass("current");b=true;return false}});if(b){return false}})}if(e!=document){var d=getparentID();var a=$("#"+d,e).height();if(touch_mode){$(".dir").click(function(){var z=null;$(".dir").each(function(){if($("ul",$(this).parents("li")).is(':visible')){z=this}});if(z){$("ul",$(".dir").parents("li")).css("display","none");if(this!=z){$("#"+d,e).css("z-index",9999).height(($("ul li",$(this).parents("li")).size()*35)+a+"px");$("ul",$(this).parents("li")).css("display","block")}else{if($("#"+d,e).height()!=a){$("#"+d,e).height(a+"px")}}}else{$("#"+d,e).css("z-index",9999).height(($("ul li",$(this).parents("li")).size()*35)+a+"px");$("ul",$(this).parents("li")).css("display","block")}return false})}$("#navigation-menu>ul>li").hover(function(){if($("ul li",this).size()>0){$("#"+d,e).css("z-index",9999).height(($("ul li",this).size()*35)+a+"px")}},function(){});$("#navigation-menu").hover(function(){},function(){if($("#"+d,e).height()!=a){$("#"+d,e).height(a+"px")}})}});function isCurrentpage(c,a){if(!$("a",c).is("a")){return false}var b=$("a",c).attr("href");if(b!=undefined&&b.length>0){b=b.replace(/ /g,"%20");var d=new RegExp(a,"i");if(b.search(d)!=-1){return true}}return false};
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div id="menu-container"><div id="navigation-menu"><ul>
<!--begin to insert contents-->

<!--end to insert contents-->
</ul></div></div>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.

- iFrame code for non-iWebsites (other tools except for iWeb)

I am Preview

This live demo is dynamically loaded when you push "Apply these settings" button. This preview may not be same to the actual view in your website.
* Important! Don't click a link from this preview. It will make you leave this page out so that you may lose your own code.