CSSマルチレベルアコーディオンメニュー - ポインター＆アイコン

Question

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

私は携帯サイトのための私の大規模な、マルチレベルのアコーディオンメニューを構築するために、上記の例を使用していました。

メニュー項目の左余白を小さくすると、開いたときに90％になり、メニュー項目のテキストの上にフォルダのアイコンが詰まった「>」ポインタがすべてうまくいった。

ポインタの左余白を減らして、フォルダアイコンを削除したいと考えています。

Page after updating with problem: superimposed pointer and icon

Page before changing the margins and colors

Answer 1

UPDATE

ここでの出発点です。私はあなたのためのコードを完了するつもりはありません。あなたはここから残りを把握できるはずです。右クリックして要素を調べ、ページとコードの間を行き来するのではなく、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; 
} 

60から以下のCSSで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

シェブロンとフォルダはそれぞれ:beforeと:after疑似要素にあります。彼らは絶対に配置されています。前の内部コンポーネントは、アイコンの後ろで本文テキストが開始するのに十分なパディングを持っていました。あなたは左のパディングを削除して、もはやそうしませんでした。ドキュメントフローにないので、パディングの変更によって影響を受けることはありません。

私の意見では、どのようなレベルのカスタマイズでも、他の人のコードを掘り下げるだけの作業が必要なため、このようなコンポーネントを作成する必要があります。

あなただけのアイコンを取り除きたい場合はそれはあなたが使用しているCSSが応答するようになりますので、さまざまな画面サイズでテストしたり、メディアクエリを削除することを確認してください

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

を設定します。おそらくあなたの画面上では見えますが、みんなでは見えません。

また、fyiとマージンは同義語ではありません。あなたが意味するものを必ず使用してください。あなたが知りたいと思わない場合は、box-model