2011-11-08 61 views
3

我想創建一個像this one這樣的菜單,並且性能對我來說非常重要。 到目前爲止,我已經遇到了兩種不同的方法,Javascript和CSS,我很難找出我應該走哪條路。哪一種更快,更輕量化?用於創建多級菜單的最快和最輕量級菜單方法

我的網站使用Javascript,但我很好奇的一件事是,如果我選擇CSS方法,我可以以某種方式使其工作,如果用戶禁用Javascript,靜態頁面會向他顯示/她嗎?

我會用一個例子來解釋我的問題。假設我的菜單上有一個DOWNLOAD按鈕。如果用戶擁有JS,則下載內容應該藉助jQuery出現在同一頁面上,但如果用戶禁用JS,則單擊該菜單項應使用戶登錄到download.php頁面。順便說一下,如果您有建議的方法有免費的解決方案,請提供一個鏈接。謝謝。

回答

2

CSS菜單比JS更難使用:如果鼠標長1px,即使1ms長,子菜單也會立即隱藏。您可以在JS菜單上添加100或200毫秒的延遲,並允許訪問者發生小的移動錯誤。並非每個人都是具有完美鼠標技能的玩家;)

所謂的「超級下拉」菜單可能比您提供的示例更好。縱向和橫向走勢在網絡上很難實現(甚至在桌面上,它只用於軟件中很少訪問的功能,只有我們的web開發人員和web設計人員才能輕鬆通過這些複雜的菜單:));巨型下拉菜單將向訪問者顯示帶有很好標題的整個鏈接。

如果您的網站應該很容易在智能手機上使用,您可能還需要考慮在點擊(即用戶點擊主鏈接後)時顯示子菜單的菜單。

編輯: 我應該已經添加了這些鏈接,沒有你問他們,但找不到第二個(現在是在我的書籤,謝謝:))

+0

您能否給我提供一個鏈接或一個簡單的例子?我對網絡世界有點新鮮。 –

+0

當然,我已經添加了3個相關鏈接 – FelipeAls

+0

非常感謝。我認爲最好的方法是將這種方法與其他答案中提供的方法結合起來(如psr's)。 –

1

你可以使用一個基於css的菜單開始顯示,然後使用JS來儘可能快地隱藏它。或者你甚至可以用另一種依賴於JS的菜單樣式替換它。

CSS更快,更輕。 JS更加靈活。雜種是最重的。

+0

那麼,這是一種在我的問題本身提到,將建立一個更強大更無bug代碼。但我的問題是,哪種方法更快/更好,我是否可以使用混合方法(支持支持JS的客戶端和禁用的客戶端) –

+0

@AlirezaNoori - 我說你可以通過使用純CSS方法。然後使用javascript隱藏純CSS方法並實現JS方法。這在兩種情況下都有效。 – psr

+0

謝謝。你能提供一個快速的例子嗎? –

0

最好的選擇是使用純CSS來實現您正在尋找的效果。這樣你就不必依靠啓用js。大約30-50%的用戶在沒有js的情況下瀏覽網頁,直到他們需要它爲止,至少從我的經驗和網站我維護。

0

默認情況下,您的CSS應該隱藏子子菜單,並且每個頂級項目都應鏈接到允許我訪問通常位於該菜單中的項目的頁面。

例如,如果您有一個名爲Cats的菜單項,並且子項是各種品種的貓,那麼您的頂級頁面(/ cats /)也應鏈接到品種。

簡而言之:頂層菜單應理想地鏈接到子菜單中的內容索引。這樣,點擊菜單的人仍然可以訪問菜單的內容,無論他們是否使用Javascript(或者使用的iPad與菜單等很古怪)

1

一個很好的理由瞭解progressive enhancement。同時使用CSS和JS!

你應該爲那些不使用JavaScript的人很少一部分創建一個運行的基本CSS菜單,然後用JS構建它以獲得你想要的。

它不僅是良好的可訪問性,爲保證您回落到一些功能(大部分時間)