접을 수있는 Mac과 같은 사이드 바 탐색 하위 메뉴로

Question

너비가 100 % 인 유동 너비 탐색 시스템을 구축해야합니다 (예 : http://nwhc.dylanparrin.com). 한 번 서브 메뉴가 클릭되면 이전 메뉴가 무너 지도록 할 수있는 방법이 있는지 궁금해합니다. 바로 지금 최종 내용에 사용되는 페이지의 30 % 정도가 좋을 것 같습니다. 최소 80 % (와 마찬가지로, 콘텐츠를 가져 오는 데 사용 된 메뉴가 클릭하면 왼쪽으로 숨김).

여기에서 다이어그램을 참조하십시오. http://i.stack.imgur.com/qJIZB.png 어떻게 가능합니까?

친절한 안부를 딜런 기본적으로

Answer 1

, 당신이 그 모습을 다시 기본 자바 스크립트에서이 같은 간단한 사용 느낄 수 있었다 :

그냥 볼 수 있습니다 필요에 따라 코드를 조정을/숨겨진 변경 'display1', 'display2'등을 필요에 따라 선택합니다. 그들은 모두 독립적으로 행동하고 확장되거나 축소 된 화면에서 콘텐츠를 "푸시 (push)"합니다.

이 방법이 적합한 해결책이라면 대답으로 선택하십시오. - 감사합니다!

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