Складная навигационная панель с 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>