如何實現這種雙梯度菜單設計？

我想實現一個網頁上的菜單設計，但我卡住了。如何實現這種雙梯度菜單設計？

概念是這樣的：有兩個垂直列，一個菜單和一個內容容器。菜單的背景是從白色到灰色的線性漸變。內容的背景是從灰色到白色的線性背景。該菜單包含可變高度的導航列表。當選擇導航項目時，除了它之外，它還需要與內容容器的顏色混合的背景。

這裏有一個形象展示我的意思：

enter image description here

這裏有約束：

一些菜單元素可膨脹或收縮。我不知道菜單的大小在任何時候都
元素的數量可以改變
但確切的漸變顏色不會改變
我不知道的高度整個網頁/內容區域
非選擇菜單項需要不融入導航容器的梯度

單獨使用CSS可以做到這一點嗎？我看着玩剪輯屬性，但它涉及到絕對定位元素和文本內，我不能做，因爲我不知道會有多少。我想不出任何符合約束條件的東西。

編輯：我們可以修改設計以保持未選擇的菜單項爲白色，然後在菜單元素結束後啓動白色至灰色漸變。但我看不到一種方法來做到這一點，因爲列可以在高度上變化。

來源

2012-05-15 Jimmy Breck-McKye

您的頁面是否已經有DOM結構？ – Bergi

是的。當前頁面將菜單實現爲ul。 –

當你爲整個ul設置背景時，你不能再對單個的背景透明。所以，你需要把它應用到每一個禮，並設置background-attachment到fixed：

ul li{ 
    background: -webkit-linear-gradient(top, red 0%, blue 100%); 
    background: -moz-linear-gradient(top, red 0%, blue 100%); 
    background-attachment: fixed; 
}

我做了一個的jsfiddle這說明該實施：

http://jsfiddle.net/kLD98/1/

請看li.space，這ISN」完美無缺。也許別人有一個想法來解決這個問題，因爲我猜梯度已經很好看了。

附錄：請看看@Bergis的評論和他附加的JSFiddle（http://jsfiddle.net/kLD98/9/），它將需要使用li.space放在一邊。

來源

2012-05-15 11:08:57 YMMD

我能想到的唯一解決方案是將內容區域的'overflow'設置爲'auto'，這樣就不必滾動背景。如果這不是你想要的，那麼我的方法可能不適合你的需求。 – YMMD

不，我的錯誤，這是工作解決方案。即使內容大於視口，並且我滾動，背景似乎也不會「粘住」。至於li.space，我通過添加overflow來修復它：隱藏到ul。 –

啊，剛剛發現，因爲ul是絕對定位的，它不能強制主要元素擴展。因此，我將無法使用它。太可惜了。儘管如此，這仍然是我列出的要求的正確解決方案，所以我仍然將其標記爲「已接受」。 –

-1

這裏是CSS漸變驚人的文章克里斯

http://css-tricks.com/css3-gradients/

來源

2012-05-15 10:35:07 Daljit

該文章如何幫助解決這個問題？ – Bergi

你試過了嗎？它的作品已經嘗試過看例子 [link] http://css-tricks.com/examples/CSS3Gradient/ – Daljit

我對梯度語法沒有任何問題。這是'混合'效果（列表元素在右邊獲得顏色），這給我造成了麻煩。 –

我擔心這是不可能沒有絕對測量。對於一個元素有一個背景，你不能用一個純CSS的子元素在其中切出一個透明的洞。

來源

2012-05-15 10:36:10 Bergi

這是我的第一個想法，但未選擇的菜單項需要與導航容器的其餘部分混合。 –

糟糕，我沒有看到（並閱讀）。白色的灰色在我的屏幕上幾乎看不到，你可以加強這個例子。我希望我能回到另一個答案... – Bergi

正式注意到，並更新。 –

將菜單項漸變設置爲與主塊相同的漸變樣式，並向菜單項樣式添加垂直偏移-Xpx。從。

來源

2012-05-15 11:02:53

但是，這將如何工作？我不知道一個元素的垂直位置，所以我無法確定漸變開始和結束於什麼顏色的任何特定元素。 –

但是，他如何知道在純CSS中沒有絕對位置的垂直偏移？ – Bergi

不是純粹的CSS，不是 - 我沒有看到這個要求。要麼顯式定義菜單項高度（不適用於可展開元素和bleugh），或者只寫一些javascript。 –

如何實現這種雙梯度菜單設計？

回答

相關問題