Skip to content

Instantly share code, notes, and snippets.

@segeda
Created December 1, 2010 14:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save segeda/723582 to your computer and use it in GitHub Desktop.
Save segeda/723582 to your computer and use it in GitHub Desktop.
Use jQuery to create web navigation from page structure.
Copyright (c) 2010, Petr Severa
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of the Petr Severa nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>One page web</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(
function () {
if (!window.location.hash) {
window.location.hash = $('article').get(0).id;
}
$('<nav><ul id=\"menu\"></ul></nav>').appendTo('body');
$('article').each(
function () {
$('<li><a href=\"#' + $(this).get(0).id + '\">' + $(this).find('h2').text() + '</a></li>').appendTo('#menu');
}
);
$('article').hide().filter(window.location.hash).show()
$('#menu a').click(
function () {
$('article').hide().filter($(this).attr('href')).show();
}
);
}
);
-->
</script>
</head>
<body>
<article id="homepage">
<h2>Homepage</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum interdum sem vel lacinia. Etiam vel enim id turpis feugiat varius et non orci. Fusce ut ullamcorper libero. Proin euismod, sem at dictum congue, tellus tortor tristique risus, nec sagittis libero ipsum et ligula. Praesent aliquet malesuada leo at elementum. Donec eleifend dignissim justo sit amet mattis. Quisque posuere libero ut nulla pretium facilisis. Sed diam nulla, tempor id vestibulum eu, dapibus id ligula. Integer aliquam ipsum sed nibh facilisis accumsan. Vestibulum ac metus sed dolor pellentesque facilisis.</p>
</article>
<article id="about">
<h2>About us</h2>
<p>Duis eget arcu arcu, eu vehicula ante. Nunc eu nisi nisl, et hendrerit augue. Morbi sagittis, nulla a cursus aliquet, nisi turpis semper nulla, non consectetur nulla mauris sit amet eros. Vestibulum eleifend fermentum arcu. Morbi leo quam, blandit sed ornare sit amet, lobortis at sapien. Praesent iaculis elit sed orci pulvinar id sodales diam dignissim. Nam quis vulputate urna. Vivamus luctus ultrices tristique. Proin quis nulla ut nunc pellentesque luctus. Morbi fermentum turpis quis velit consectetur sed bibendum tortor dictum. Suspendisse hendrerit lacinia porta. Mauris et malesuada urna.</p>
</article>
<article id="contacts">
<h2>Contacts</h2>
<p>Nulla ornare arcu eu felis sagittis accumsan. Nam posuere, tellus nec tempus tempor, mauris sapien facilisis orci, ac posuere magna tortor nec nisi. Maecenas tincidunt massa vitae massa tincidunt in tempus tortor congue. Mauris gravida metus ut ligula elementum malesuada. Nulla nec nunc lacus, in tempor ligula. Nam ornare sollicitudin sem ut vulputate. Nam egestas pretium nisi, sed ultrices tortor viverra eu. Nam et metus massa. Donec quis venenatis est. Nulla malesuada sagittis mauris eu lobortis. Vivamus molestie odio vitae est rhoncus accumsan. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment