logo 2 Level Java Menu

Link to origional web site.

Joey's statue of a white dog was originally given to Jennifer Aniston as a good luck present from her best friend.
During this period, then-locally famous Suzy Waud anchored evening broadcasting.
George Louis Costanza is a fictional character on the United States based television sitcom Seinfeld (1989–1998).



HTML for 2 Level Horzontal Java Menu

Insert the following in the Head of your page.

<script type="text/javascript" src="twolevelmenu.js">
/***********************************************
* Dolphin Tabs Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface by: http://www.13styles.com/css-menus/dolphin/
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/


Insert the following where your Menu should go.

</script>
<div id="twolevelcontainer">
<div id="twolevelnav">
<ul>
<li><a href="http://www.javascriptkit.com"><span>Home</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="joey"><span>Joey</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="suzy"><span>Suzy</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="george"><span >George</span></a></li>
<li><a href="http://www.javascriptkit.com"><span>Contact Us</span></a></li>
</ul>
</div>

<!-- Sub Menus container. Do not remove -->
<div id="twolevel_inner">
<div id="joey" class="innercontent">
Joey's statue of a white dog was originally given to Jennifer Aniston as a good luck present from her best friend. </div>
<div id="suzy" class="innercontent">
During this period, then-locally famous Suzy Waud anchored evening broadcasting. </div>
<div id="george" class="innercontent">
George Louis Costanza is a fictional character on the United States based television sitcom Seinfeld (1989–1998). </div>
<!-- End Sub Menus container -->
</div>
</div>
<script type="text/javascript">
//twoleveltabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX)
twoleveltabs.init("twolevelnav", 1)
</script>

CSS for Horizontal Java Menu

#twolevelcontainer{position:relative;border-bottom: 2px solid navy; color:#E0E0E0;background:#143D55; width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#twolevelnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(images/twolevel/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#twolevelnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#twolevelnav ul li{display:block;float:left;margin:0 1px;}
#twolevelnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#twolevelnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#twolevelnav ul li a:hover{color:#fff;background:transparent url(images/twolevel/dolphin_bg-OVER.gif) repeat-x bottom left;}
#twolevelnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#twolevelnav ul li a.current,#twolevelnav ul li a.current:hover{color:#fff;background:#1D6893 url(images/twolevel/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#twolevelnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(images/twolevel/dolphin_right-ON.gif) no-repeat top right;height:33px;}
#twolevel_inner{color: white; padding: 5px; font-size: 80%; height: 1em}
#twolevel_inner a:link, #twolevel_inner a:visited, #twolevel_inner a:active{color: white}
#twolevel_inner a:hover{color: yellow}
.innercontent{display: none;}

Java Script for Menu

Click Here and save to the directory of your new design.


Images for css Horizontal Java Menu

dolphin_bg.gif

dolphin_bg-ON.gif

dolphin_bg-OVER.gif

dolphin_left-ON.gif

dolphin_right-ON.gif



Top