Modern Navigation menu

This beautiful navigation bar is originally from http://lwis.net/free-css-drop-down-menu/. Special thanks to the author. You can get more diverse drop down menu styles from that site. This menu style is inspired by NVIDIA.com. You can add up to 2-depth menus.

* 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, 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 also copy & paste each code in the <head> and <body> to each tag.)

* Customize styles

width height font size font size (sub menu)

font family

* 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="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="https://googledrive.com/host/0B6W2C3whvuZdY2FaNy1tblhIX1U/dropdown.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://googledrive.com/host/0B6W2C3whvuZdY2FaNy1tblhIX1U/themes/nvidia.com/default.advanced.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery.dropdown.js"></script>
<![endif]-->
<style type="text/css">
#navigation-menu {
	/*widget_width*/width:700px;
	/*widget_height*/height:39px;
}
#navigation-menu ul.dropdown {
	/*font_family*/font-family:Arial,Arial,Helvetica,sans-serif;
	/*font_size*/font-size:14px;
	background-color:#000;
	width:100%;
	text-align:left;
}
#navigation-menu ul.dropdown ul {/*sub_font_size*/font-size:12px;left:0;right:auto;}
#navigation-menu ul.dropdown li.item-last ul {right:0;left:auto;}
</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($("#navigation-menu .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="navigation-menu"><ul class="dropdown dropdown-horizontal">
<!--begin to insert contents-->

<!--end to insert contents-->
</ul></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.

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.