Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

78 lines (57 sloc) 4.821 kB
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Slide-Down Mega Drop-Down Menus with Ajax and jQuery</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://s3.amazonaws.com/impressivewebs/mega-drop-downs/styles/style.css">
</head>
<body>
<div id="container">
<header>
<h1>Slide-Down Mega Drop-Down Menus with Ajax and jQuery</h1>
<h2>By <a href="http://www.impressivewebs.com">Impressive Webs</a></h2>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li class="menu"><a href="resources.html">Resources</a></li>
<li class="menu"><a href="articles.html">Articles</a></li>
<li class="menu"><a href="tutorials.html">Tutorials</a></li>
<li class="menu"><a href="videos.html">Videos</a></li>
<li class="menu"><a href="syndicated.html">Syndicated</a></li>
</ul>
</nav>
</header>
<div id="dropdown" class="loading"></div><!-- #dropdown -->
<div id="main">
<p><strong>The menu above has mega drop-downs that slide the content area down, similar to the drop-down menus on <a href="http://www.cbc.ca/">CBC.ca</a>. This is just filler content to show how the content below the drop-downs slides down instead of being overlaid (as with customary drop-downs). <a href="http://www.impressivewebs.com/mega-menus-ajax-jquery">Read the associated article</a> for a full description of the features of this menu. Or just try it out.</strong></p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<footer>
<p><a href="http://www.impressivewebs.com/mega-menus-ajax-jquery">&lt; Back to the Article</a></p>
</footer>
</div><!-- end of #container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
<script src="http://s3.amazonaws.com/impressivewebs/mega-drop-downs/js/general.js?ver=2"></script>
<script>
var _gaq = [['_setAccount', 'UA-1965499-1"'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.