展開邊欄菜單。他們是如何做到的？

-1

http://pointnorth.io 展開邊欄菜單。他們是如何做到的？

他們是如何在左側擴展側邊欄的？這似乎只是CSS，但我可能是錯的。

這裏有主要的網址，然後其他的都以＃爲前綴，文本全部在一個頁面上，然後在點擊時擴展或隱藏。

我不明白他們如何隱藏或顯示數據。

來源

2014-09-26 Barbara

有你看了頁面的源代碼？ – 2014-09-26 09:26:23

@ialarmedalien當然。我問，因爲我不明白的代碼。 – Barbara 2014-09-26 09:27:44

他們使用javascript和css來顯示和隱藏文本。 – 2014-09-26 09:28:27

它不僅僅是CSS。這個頁面在body的底部有javascript代碼，它爲鏈接設置了數據激活屬性，它被點擊。正如您所看到的，數據激活使得高度爲：auto的子項目部分成爲可能。在其他情況下，.nav - 子節類的高度爲：0px。

來源

2014-09-26 09:28:43 magmel

你確定嗎？我從chrome控制檯中刪除了'腳本'節點（F12>元素>已刪除''），並且無論如何它仍然在工作。 – Barbara 2014-09-26 09:34:14

無關緊要，腳本已加載並正在運行，無論您是否刪除。 – magmel 2014-09-26 09:38:30

請閱讀這篇文章http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/ – magmel 2014-09-26 09:40:02

您可以輕鬆地實現自己沒有在這個小提琴http://jsfiddle.net/vfrcx678/解除別人的idea.Look以及它是如何在這裏http://jsfiddle.net/vfrcx678/show/

這是一些示例代碼

$(window).hashchange({ 
    hash: "#!/login/", 
    onSet: function() { 
     $("#login-form").show(); 
    }, 
    onRemove: function() { 
     $("#login-form").hide(); 
    }, 
});

項目頁https://github.com/apopelo/jquery-hashchange

來源

2014-09-26 09:43:01 Gandalf

謝謝。但它不適合我。我會從github下載代碼並看看。 – Barbara 2014-09-26 09:53:03

展開邊欄菜單。他們是如何做到的？

回答

相關問題