Dynamic webpage sliding good scripting practice? - html

Question

I want to script a website which will have a menu on the left side:
when clicked on an item on this menu the site slides up or down (but there should be no option to scroll up or down).
Yet now when the user interacts with something in the webpage (not the menu) the site slides right/left.
So there are no reloading of the site!
For example the menu contains home and account.
if the user is on home and clicks on acount the site slides down (but he should not have the option to scroll down by himself)!
Now on account when he clicks on a button named "Edit Account" the site slides (but not the menu) right to a page were he can edit his account no when he hits save the site slides back to account
With site I mean an inner pre defined box of course the header and footer don't move!
Here is a small example of a script I wrote on jsfiddle.
I know that this will look very cool but I don't want that the user to need to sacrifice website loading speed just for a cool sliding effect!
Now my question is: would this be good programming practice?

Answer 1

Right if i believe right you want something like my website "www.ohlookawebsite.com" what you will need to do is use jquery for .show and such to create the effect so for example
<div id="navagation">
<div id="home" onclick="homeClick()">Home</div>
<div id="about" onclick="aboutClick()">About</div>
<div id="account" onclick="accountClick()">Account</div>
</div>
That would be the navagation then you can set out the <div>s on the page with the ones that shouldn't be shown yet with style="display: none;" such as;
<div id="boxHome">
Welcome to the home page!
</div>
<div id="boxAbout" style="display: none;">
Welcome To the About Page!
</div>
<div id="boxAccount" style="display: none;>
You're account info!
</div>
You will need to the use jquery and javascript to show different "Pages"
function homeClick(){
$("#boxAbout").fadeOut(500);
$("#boxAccount").fadeOut(500);
$("#home").css("color", "green");
$("#boxHome").delay(500).fadeIn(1000);
}
You can see an example of this here: http://jsfiddle.net/gM4hB/4/
Hope this helps