可摺疊的Mac-Like子菜單導航子菜單

我需要構建寬度爲100％的流體寬度導航系統，如下所示：http://nwhc.dylanparrin.com。只是想知道是否有一種方法可以得到它，這樣一旦一個子菜單被點擊，以前的菜單就會崩潰，現在有30％的頁面被用於最終的內容，如果我能夠得到至少80％（如在用於使內容隱藏到左側的菜單一旦被點擊）。可摺疊的Mac-Like子菜單導航子菜單

請看這裏的示意圖：http://i.stack.imgur.com/qJIZB.png 這將如何成爲可能？

最親切的問候，迪倫

來源

2012-02-03 Dylan

基本上，你可以重新創建的外觀和感覺使用，因爲這在基本的JavaScript這樣簡單的事情：

只需根據需要進行調整的代碼，這將是可見/隱藏和改變'display1'，'display2'等。當擴展或收縮oscreen時，他們將獨立行動並「推送」內容。

如果這是一個合適的解決方案，請選擇它作爲答案 - 謝謝！

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

來源

2012-02-03 03:14:36 scottcarmich

這正是你想要的。沒有人會爲你創建你的網站。這些是你需要的積木。 – scottcarmich 2012-02-09 21:11:28

感謝這個Scott，它幫助我。我很欣賞你的解釋和演示代碼的簡單性。 – Dave 2012-03-11 03:59:28

可摺疊的Mac-Like子菜單導航子菜單

回答

相關問題