44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Halftone Navigation Menu With jQuery & CSS3 | Tutorialzine demo</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
|
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
|
|
|
|
<script type="text/javascript" src="script.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Halftone Navigation Menu With jQuery & CSS3</h1>
|
|
<h2>View the <a href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/">original tutorial »</a></h2>
|
|
|
|
|
|
<div id="main">
|
|
|
|
<div id="navigation">
|
|
<ul class="menuUL">
|
|
<!-- The class names that are assigned to the links correspond to name of the shape that is shown on hover: -->
|
|
<li><a href="#" class="house">Home</a></li>
|
|
<li><a href="#" class="wrench">Services</a></li>
|
|
<li><a href="#" class="envelope">Contact</a></li>
|
|
<li><a href="#" class="info">About</a></li>
|
|
</ul>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div id="stage">
|
|
<!-- The dot divs are shown here -->
|
|
</div>
|
|
</div>
|
|
|
|
<p class="tutInfo">This is a tutorialzine demo. View the <a href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/">original tutorial</a>, or download the <a href="demo.zip">source files</a>.</p>
|
|
|
|
|
|
</body>
|
|
</html>
|