下導航菜單

動畫圖標我以前問這個項目的一些問題。我已經創建了一個模擬網頁，作爲課堂評估的一部分。下導航菜單

你可以在這裏我github上找到頁面：dtarvin.github.io/davidTarvinEvaluation/index.html

有在頁面的右下角有一個導航菜單。當突出顯示在菜單項中的一個，一爪子圖標滑動菜單中的項目下，菜單項垂直向上移動。然後，當你移動到另一個項目，爪子幻燈片到下一個項目，垂直地向上移動，而前一個項目移到回落到原來的位置。

兩個問題：首先，當我有一個項目下的爪子，如果我有我的光標指向菜單項停留在高度提出的爪子的左側或右側。但是，如果我的指針是在爪子本身，菜單項返回到原來的位置。我該如何解決？第二，當我從一個菜單項移動到另一個菜單項時，比如從主頁到關於，在主頁從它下面移出之前，主頁將下降，以便最終拖拽單詞Home。有沒有辦法解決這個問題，這樣不會發生？

謝謝！

來源

2017-04-11 David Tarvin

你的第一個問題是一個z-index的問題上，爪子上的文字之上，但懸停只觸發上的文字，所以無論是應用懸停爪子一樣好，甚至移到高於文本爪子。你的第二個問題是時間問題，我認爲過渡期延遲可以解決。 – Slime

1）的pointer-events: none;的CSS屬性添加到#paw。

#paw { 
    //other properties... 
    pointer-events: none; 
}

2）爲li span添加top屬性值不盤旋時，並添加一個轉換延遲。

li span { 
    position: relative; 
    transition: top .5s 0.5s; //this has a 0.5s delay 
    top: -0vh; 
}

來源

2017-04-12 03:27:00 c01gat3

回答

相關問題