Create Simple One Page Profile With JQuery

If you have a small team agency maybe you need to create a simple company profile site, one page site might be great idea, cause it will give your prospect client or visitors to browse all important site content without having to refresh the page.

Like the preview above this example create a company profile only using typographic, and just manipulating the type with CSS and JQuery.

Demo | Download

The Header

The header only contain the example company name with very huge font size. I make it have two line header.

<div id="header">
    <div class="head1">DES/NG</div>
    <div class="head2">!N&COPY;</div>
</div>

Header CSS style, the purpose of using huge font style are to make it easier the visitors to read what the company name is, and as a background for main navigation.

#header {
    height: 100px;
    font-size: 192px;
    color: #333;
    letter-spacing: -18px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.head1 {
    position: relative;
    top: -40px;
    left:-15px;
}
.head2 {
    position: relative;
    top: -120px;
    left: -15px;
}

The Content

The content contains the main navigation and each detail information, the navigation only contain simple type that display horizontally.

<div id="nav">
    <a href="" class="nav1"><span>+</span> services</a>
    <div class="subnav">
        <a href="#" class="nav2 services">Custom Web Application</a>
    </div>
    <a href="" class="nav1"><span>+</span> clients</a>
    <div class="subnav">
        <a href="#" class="nav2 clients">Blogger</a>
    </div>
    <a href="" class="nav1"><span>+</span> about us</a>
    <div class="subnav">
        <a href="" class="nav2 about" id="amethodology">Methodology</a>
        <div id="p-about">
            <p id="a-methodology">
                Requirement &rarr; Design &rarr;
            </p>
        </div>
    </div>
    <a href="" class="nav1"><span>+</span> contact</a>
    <div class="subnav">
        <div id="c-contact">
            <p class="con">
                <label>Visit Design!N&COPY; Office</label>
                : Santa Monica Boulevard Los Angeles
            </p>
        </div>
    </div>
</div>

Using JQuery we can easily show hide element or in this example slideUp and slideDown, and changing CSS style on the fly, when appropriate link clicked.

$(document).ready(function() {
    $("#nav .nav1").click(function() {
        if (!$(this).next().is(":visible")) {
            $(this).find("span").html('–');
            $(this).next().slideDown('fast');
        }
        else {
            $(this).find("span").html('+');
            $(this).next().slideUp('fast');
        }
        return false;
    });

    $(".about").click(function() {
        $(this).css("color", "#ff4040");
        $(this).siblings().css("color", "#999");

        var id = "a-"+$(this).attr("id").replace("a", "");

        $("#p-about").show();
        $("#"+id).slideDown('fast');
        $("#"+id).siblings().slideUp('fast');
        return false;
    });
});

Demo | Download