ダイナミックなWebページが優れたスクリプティング実践をスライドさせていますか？

Question

左側のメニューを持つウェブサイトをスクリプト化したいとします：

このメニューの項目をクリックすると、サイトが上下にスライドしますが、上下にスクロールするオプションはありません。

しかし、ユーザーがウェブページ（メニューではない）内の何かと対話するとき、サイトは左右にスライドします。

サイトの再読み込みがあります。

たとえば、のホームとのアカウントが含まれています。

ユーザーが家上にあり、サイトがダウンスライドACOUNTをクリックした場合（しかし、彼は自分でスクロールダウンするオプションを持つべきではありません）！ アカウントに今

彼は彼が戻ってにスライドし、サイトを保存当たったとき、彼は何も彼のアカウントを編集することができた右ページに「アカウントの編集」サイトスライド（ただし、メニュー）という名前のボタンをクリックしませんアカウント

サイトでは、私は内側と同じ定義済みのボックスを意味しますが、ヘッダーとフッターは移動しません！

ここには、jsfiddleに書いたスクリプトの小さな例があります。

私はこれが非常にクールに見えますが、私はユーザーがウェブスライドのスピードを犠牲にする必要はないと知っています！

今私の質問です：これは良いプログラミングの練習ですか？私は右のあなたは私のウェブサイトのような何かをしたい「www.ohlookawebsite.com」と考えている右場合

Answer 1

は何を行う必要がありますと、使用.SHOWためのjQueryとで効果を作成するために、そのようなので、例えば

<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> 

それはnavagationであり、あなたはstyle="display: none;"などのようにまだ表示すべきではないものでページ上に<div>を設定することができます。

<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> 

あなたはここで、この例を見ることができます異なる「ページ」を表示するために使用jQueryとJavaScriptに

function homeClick(){ 
    $("#boxAbout").fadeOut(500); 
    $("#boxAccount").fadeOut(500); 

    $("#home").css("color", "green"); 
    $("#boxHome").delay(500).fadeIn(1000); 
} 

が必要になります。http://jsfiddle.net/gM4hB/4/

希望これは

を支援