Simple One Page site with jQuery

Today I’m going to tell how to create a simple one page website.
Even though our solution requires jQuery it will work perfectly without JavaScript as well. Besides that for Search Engine Optimization we leave physical links, so search spiders can easily index the whole website.

Demo

First of all we create couple simple html pages:
index.html

<!DOCTYPE html>
<html>
<head>
    <title>One page site</title>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div id="wrap">
    <div id="container">
        <h2>Home page</h2>
        <p>Home page of the site</p>
    </div>
</div>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
    <title>About us</title>
</head>
<body>
    <div id="container">
        <h2>About us</h2>
        <p>Information about our company, about our products and services</p>
    </div>
</body>
</html>

In the header of the index page add link to the jQuery library.
Is case if JavaScript disabled add css file in all pages.

In the index.html page add JavaScript code before closing body tag.
Now if user click on a link in the div id="menu", we launch asynchronous jQuery.load function and load content of the requested page in the div id="wrap"

<script>
    (function(){
        var wrap = $('#wrap');

        $('#menu').find('a').on('click', function(e){
            e.preventDefault();
            var href = $(this).attr('href');
            wrap.load(href + ' #container');
        });
    })();
</script>

Comments are closed.