Sample Blog: OpenSource JavaScript Menu

Below is a sample of the JavaScript Menu:

Below is the code for the JavaScript Menu:

<!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" ><head runat="server" >    	<title>MenuMatic Horizontal Example</title>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<link rel="stylesheet" href="http://myweb.students.wwu.edu/custorr/menu-matic/css/MenuMatic.css" type="text/css" media="screen" charset="utf-8" />		</head><body>   <div id="container" >			    <ul id="nav">			<li><a href="#"><B>Menu 1</B></a>				<ul>					<li><a href="#">• Menu 1-A »</a>						<ul>							<li><a href="#">• Menu 1-A-I</a></li>							<li><a href="#">• Menu 1-A-II</a></li>							<li><a href="#">• Menu 1-A-III</a></li>							<li><a href="#">• Menu 1-A-IV</a></li>							<li><a href="#">• Menu 1-A-V</a></li>						</ul>					</li>					<li><a href="#">• Menu 1-B »</a>						<ul>							<li><a href="#">• Menu 1-B-I</a></li>							<li><a href="#">• Menu 1-B-II</a></li>							<li><a href="#">• Menu 1-B-III</a></li>						</ul>					</li>					<li><a href="#">• Menu 1-C »</a>						<ul>							<li><a href="#">• Menu 1-C-I</a></li>							<li><a href="#">• Menu 1-C-II</a></li>							<li><a href="#">• Menu 1-C-III</a></li>							<li><a href="#">• Menu 1-C-IV</a></li>						</ul>					</li>					<li><a href="#">• Menu 1-D »</a>						<ul>							<li><a href="#">• Menu 1-D-I</a></li>							<li><a href="#">• Menu 1-D-II</a></li>							<li><a href="#">• Menu 1-D-III</a></li>							<li><a href="#">• Menu 1-D-IV</a></li>							<li><a href="#">• Menu 1-D-V</a></li>							<li><a href="#">• Menu 1-D-VI</a></li>							<li><a href="#">• Menu 1-D-VII</a></li>							<li><a href="#">• Menu 1-D-VIII</a></li>							<li><a href="#">• Menu 1-D-IX</a></li>							<li><a href="#">• Menu 1-D-X</a></li>							<li><a href="#">• Menu 1-D-XI</a></li>							<li><a href="#">• Menu 1-D-XII</a></li>							<li><a href="#">• Menu 1-D-XIII</a></li>							<li><a href="#">• Menu 1-D-XIV</a></li>							<li><a href="#">• Menu 1-D-XV</a></li>						</ul>					</li>				</ul>			</li>			<li><a href="#"><B>Menu 2</B></a>				<ul>					<li><a href="#">• Menu 2-A »</a>						<ul>							<li><a href="#">• Menu 2-A-I</a></li>							<li><a href="#">• Menu 2-A-II</a></li>						</ul>					</li>					<li><a href="#">• Menu 2-B »</a>						<ul>							<li><a href="#">• Menu 2-B-I</a></li>							<li><a href="#">• Menu 2-B-II</a></li>							<li><a href="#">• Menu 2-B-III</a></li>							<li><a href="#">• Menu 2-B-IV</a></li>							<li><a href="#">• Menu 2-B-V</a></li>							<li><a href="#">• Menu 2-B-VI</a></li>							<li><a href="#">• Menu 2-B-VII</a></li>							<li><a href="#">• Menu 2-B-VIII</a></li>							<li><a href="#">• Menu 2-B-IX</a></li>							<li><a href="#">• Menu 2-B-X</a></li>						</ul>					</li>					<li><a href="#">• Menu 2-C</a></li>					<li><a href="#">• Menu 2-D</a></li>					<li><a href="#">• Menu 2-E</a></li>				</ul>			</li>			<li><a href="#"><B>Menu 3</B></a>				<ul>					<li><a href="#">• Menu 3-A</a></li>					<li><a href="#">• Menu 3-B</a></li>					<li><a href="#">• Menu 3-C</a></li>					<li><a href="#">• Menu 3-D</a></li>					<li><a href="#">• Menu 3-E</a></li>				</ul>			</li>			<li><a href="#"><B>Menu 4</B></a>			</li>		</ul>				    <div id="content">	   	 			<h1>Title Here</h1>			<p>Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. </p>    	</div>    </div>		<script src="http://myweb.students.wwu.edu/custorr/menu-matic/js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script></body></html>

Simply copy the code above to your Blog or Web page and it should appear as indicated in the preview above.

The Menu should also work on ALL internet browsers such as Safari, Camino, FireFox, Opera, and of course Internet Explorer.

This Menu is very straight forward; one can easily change the background color and menu size.

Adding Sub-Levels to the Menu is also quite simple, which can be accomplished by manipulating the List tags () & Upper Level () tags.

This menu should be useful for large web-sites in need of a smooth and easy-to-use navigation.

Sample Blog

Tuesday, July 27, 2010

OpenSource JavaScript Menu

No comments:

Post a Comment

Blog Archive

About Me

RECENT FEEDS

RSS