WordPress的CSS主導航.current-menu-item轉換：

我有一個wordpress的本地安裝和使用主題。當在頁面上時，「當前頁面」具有帶三角形形狀的動態彩色線條。最終目標是採取三角形，並在整個菜單項中複製它，爲一個鋸齒狀的效果，而不是單一居中的一個..我發現了'動態菜單高亮'的一些材料，但無法弄清楚如何應用它。這不是一個圖像或背景圖像，它似乎是純粹的CSS。以下是來自styles.css的css示例。當我玩弄變換時：我可以得到一些結果，而不是所期望的結果。希望有人能幫忙。謝謝！WordPress的CSS主導航.current-menu-item轉換：

.not-ie #main-nav .current_page_item:after, 
.not-ie #main-nav .current_page_parent:after, 
.not-ie #main-nav .current-menu-item:after { 
    background: #f15a23; 
    bottom: -2.5px; 
    content: ''; 
    left: 50%; 
    display: block; 
    height: 5px; 
    margin: 0 0 0 -2.5px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    position: absolute; 
    width: 5px; 
}

來源

2012-10-07 nil

這似乎是你的問題與wordpress有關。我建議把它放在你的問題標題中。 CSS示例很好，但沒有html，對於不使用wordpress的人來說有點困難。此外，您可以使用[jsfiddle.net]（http://jsfiddle.net）作爲工具更清晰地顯示您的示例。 – VKen

我不完全確定這是與wordpress相關的，但它會澄清...是否希望在現有元素上採用現有樣式並更改該元素上樣式的顯示方式？如果是這樣的話，那純粹是一個CSS問題。你可以確認嗎？ – caitriona

它與css直接相關。我想，Wordpress將把它放到上下文中。就元素而言。這是我無法弄清楚的。當我播放變換時：旋轉並將度數設置爲90，變爲平方。默認情況下，45deg是三角形。我只是不明白這個形狀是什麼，我不太瞭解css。我可以一起移除它，也許我會這樣做。然後，我可以用圖像替換它，並獲得期望的效果，使其變得鋸齒狀。任何解釋或建議？ – nil

有CSS三角形這裏的一個很好的解釋：How do CSS triangles work?

，但你不能用這個技術來創建僅使用一個HTML元素的多個三角形。

你可以引入更多的元素，以便你可以顯示更多的三角形，但這聽起來不像是一個很好的解決方案。所以在這種情況下，使用圖像可能是最簡單的。使用圖像的優點還在於，如果您有不同寬度的元素，則可以水平重複。

編輯：

我發現另一隻CSS的解決方案（由利·貝羅的第3個元素在這裏嚴重影響：http://leaverou.github.com/animatable/） - 但是它不能在IE瀏覽器，所以它可能不是一個解決方案你，但櫃面你感興趣的話，那就是：

#zig_zag { 
    width: 140px; 
    height: 5px; 
    border-top:1px solid #E91010; 
    background-repeat: repeat-x; 
    background-position:10px 0; 
    background-size: 7px 10px; 
    background-image: 
     linear-gradient(-45deg, #E91010 25%, transparent 25%), 
     linear-gradient(45deg, transparent 75%, #E91010 75%), 
     linear-gradient(45deg, #E91010 25%, transparent 25%), 
     linear-gradient(-45deg, transparent 75%, #E91010 75%);  
}

的jsfiddle這裏：http://jsfiddle.net/hGy6X/

[注：它採用利·貝羅的無前綴腳本http://leaverou.github.com/prefixfree/]

來源

2012-10-08 08:42:32 caitriona

嘿非常感謝@caitriona。這幫助我極大地理解了這種影響是如何消除的。在完成所有這些工作之後，我認爲它看起來不像我想象的那麼好。感謝您的努力。 – nil

WordPress的CSS主導航.current-menu-item轉換：

回答

相關問題