CSS多層手風琴菜單—指針和圖標

Question

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

我使用上面的示例為移動網站構建了大型多層手風琴菜單。

一切正常，但是當我減小菜單項的左邊距時，一個“>”指針在打開時變成90％，並且文件夾圖標塞滿了菜單項的文本。

我希望能夠減少指針的左邊距並刪除文件夾圖標。

問題更新后的頁面：指針和圖標重疊

更改頁邊距和顏色之前的頁面

Answer 1

更新

這是一個起點。 我不會為您完成代碼。 您應該可以從這里找出其余的內容。 您可以右鍵單擊，檢查元素，然后使用CSS來代替在頁面和代碼之間來回移動（這不會保存，因此請記住將其復制到代碼中）。

添加background: none ：

刪除菜單文件夾：

.cd-accordion-menu input[type=checkbox]:checked + label::after {
    background-position: -32px 0;
    background: none;
}

刪除主文件夾：

@media only screen and (min-width: 600px)
style.css:215
.cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after {
    /* left: 65px; */
    background: none;
}

刪除標簽文件夾：

@media only screen and (min-width: 600px)
style.css:215
.cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after {
    /* left: 65px; */
    background: none;
}

刪除標簽圖標的左側位置：

@media only screen and (min-width: 600px)
style.css:211
.cd-accordion-menu ul label::before {
    left: 65px;
}

您可以通過刪除以下CSS的padding-left來減少“邊距”：

@media only screen and (min-width: 600px)
style.css:206
.cd-accordion-menu ul label, .cd-accordion-menu ul a {
    padding-left: 60px;
}

在以下CSS中將填充從60減少到40：

@media only screen and (min-width: 600px)
style.css:208
.cd-accordion-menu ul label, .cd-accordion-menu ul a {
    padding-left: 40px;
}

外觀如下：

Answer 2

V型和文件夾分別位於:before和:after偽元素中。 他們是絕對的位置。 之前的內部組件具有足夠的填充，以使正文在圖標之后開始。 您刪除了左填充，不再是這種情況。 由於它們不在文檔流中，因此不會受到填充更改的影響。

在我看來，您應該自己構建這樣的組件，因為任何級別的自定義都需要花費大量的工作來挖掘其他人的代碼，而沒有任何保證它編寫得很好。

如果您只想擺脫設置的圖標

   .cd-accordion-menu label::before, 
   .cd-accordion-menu label::after {
      content: none;
   }

您所使用的css看起來像是響應式的，因此請確保在不同的屏幕尺寸上進行測試或刪除媒體查詢。 它可能會在您的屏幕上看起來不錯，但在所有人的屏幕上看起來並不好。

另外，fyi padding vs margin並不是同義詞，請確保使用您的意思。 如果您不知道，則應該閱讀盒裝模型