サブメニュー付きの折りたたみ式Macのようなサイドバーナビゲーション

Question

幅の100％の流体幅ナビゲーションシステムを構築する必要があります（http://nwhc.dylanparrin.com）。ちょうどサブメニューがクリックされると、前のメニューが崩壊するように、私はそれを得ることができる方法があるのだろうかと疑問に思う。私が得ることができれば、最終的な内容のために使用されているページの30％少なくとも80％（コンテンツを取得するために使用されるメニューは、クリックすると左に隠れる）。

ここに図を表示http://i.stack.imgur.com/qJIZB.png これはどのように可能ですか？

親切よろしく、 ディラン

Answer 1

基本的に、あなたはその外観を再作成し、基本的なJavaScriptでこのような単純なものを使用して感じることができました：

必要なだけでコードを調整/可視隠された、変更されること'display1'、 'display2'などを必要に応じて選択する。彼らはすべて独立して行動し、拡大または縮小された画面でコンテンツを「プッシュ」します。

これが適切な解決策であれば、答えとして選択してください - ありがとう！

<script type="text/javascript"> 
<!-- 

    function Show_Stuff(Click_Menu) 
    // Function that will swap the display/no display for 
    // all content within span tags 
    { 
    if (Click_Menu.style.display == "none") 
    { 
    Click_Menu.style.display = ""; 
    } 
    else 
    { 
    Click_Menu.style.display = "none"; 
    } 
    } 

--> 
</script> 


<div><a href="javascript:Show_Stuff(display1)">Link #1 (Hyperlink)</a></div> 
<span ID="display1" style="display: none"> 
<table bgcolor="#cccccc"> 
<tr><td width='200' wrap> 
This is the table that will appear when link #1 is clicked. 
You can add in a <a target="_blank" href="http://www.yahoo.com">hyperlink</a> 
or any other html 
</td> 

</tr> 
</table> 
</span> 


<div><a href="javascript:Show_Stuff(display2)">Link #2 (Hyperlink)</a></div> 
<span ID="display2" style="display: none"> 
<table bgcolor="#ffcc00"> 
<tr><td width='200' wrap> 
This is the table that will appear when link #2 is clicked. 
You can add in a <a target="_blank" href="http://www.google.com">hyperlink</a> 
or any other html 
</td> 

</tr> 
</table> 
</span>