純粋な CSS を使用してフィルター メニュー機能を実装する

この記事では、純粋な CSS を使用して、淘宝網のベビー フィルター メニューのような効果を実現します。この例は淘宝網ほど強力ではありませんが、原理は少し工夫すれば、淘宝網と同じ効果を達成することもできます。 。皆さんのお役に立てれば幸いです。

コンテンツ フィルタリングは、Web、特に電子商取引 Web サイトの一般的な機能であり、ユーザーがコンテンツをフィルタリングして、要件を満たすコンテンツのみを表示できるようにします。この機能は、淘宝網などのスクリーンショットでわかりやすく説明できます:

上の図に示すように、ユーザーは 1 着のドレスを購入したいと考えています。 、製品リスト全体に表示される製品が多すぎます。顧客は自分が着たいドレスをどうやって選べばよいのか分かりません。上部にカテゴリがあり、顧客が必要なオプションを選択すると、条件を満たさない製品が除外されます。上の写真では「エレガント」なスカートを選びました。もちろん、さらに多くの条件を選択することもできます。ここではこれ以上多くは言いません。

とはいえ、以前はそのような効果を実現するには JavaScript (または jquery ベースのプラグイン) が必要でした。たとえば、CodyHouse のコンテンツ フィルタリングの例です。しかし、JavaScript を理解していない学生にとって (理解できないことは理由にはなりません)、同様の機能を実装するのは確かに困難です (私自身の経験では、涙が止まらず泣きそうになることがあります。始まり）。

幸いなことに、パペットは JavaScript なしで実装できるようになりました。つまり、純粋な CSS を使用して、より単純な機能を備えたコンテンツ フィルターを実装することは難しくありません。これが今日皆さんと共有したいことです。

まず例を見てみましょう

まず簡単な例を見てみましょう。ページが読み込まれると、女性用の服、男性用の服、子供用の服が一緒に表示されます。次の操作を行うと、予期せぬ効果が得られます。

「婦人服」ボタンをクリックすると、「紳士服」と「子供服」の両方が除外されます

「紳士服」ボタンをクリックすると、「婦人服」と「子供服」の両方が除外されますフィルタリングされます

「子供服」ボタンをクリックすると、「婦人服」と「紳士服」がフィルタリングされます

もちろん、このケースの機能はタオバオのようなNBではなく、Haodaiですも同様のコンテンツフィルタリング機能を完成させています。

実装原理

この機能の実装原理は実際にはそれほど複雑ではありませんが、誰もが注目していません。これは 2 つの側面に要約できます:

強力なセレクター

この機能を実現するには、主にユニバーサル兄弟セレクター (E ～ F) と疑似クラス セレクターに依存します: 強力な CSS セレクターでチェックされます。ラジオ ボタンが選択されると、他のカテゴリのコンテンツが非表示になります:

input[type="radio"]{
    &[id="men"]:checked {
        ~ .women,
        ~ .children{
            ....
        }
    }
}

上記のスタイルを通じて対応する .women 要素と .children 要素を制御するには、要素と input 要素が兄弟要素であることを確認する必要があります。これは、以下で説明する 2 番目の重要なポイントでもあります。

優れた、一致する構造

CSS のみを使用してこの機能を作成するには、構造の乱れが必要な効果に直接影響するため、厳密な構造が必要です。これは欠点でもあります。その 1 つは、ラジオ ボタン「ラジオ」を使用してラベルを一致させることです。見栄えを良くするために、 を表示したくない場合は、ラベルの for 属性を通じて選択した「ラジオ」を制御する必要があります。したがって、入力の id 値はラベルの for 値と一致する必要があります。さらに、すべての入力の名前の値は同じであり、それらがグループに属していることをブラウザーに伝えます。例:

<input type="radio" id="men" name="clothing" />
<label for="men">男装</label>
<input type="radio" id="women" name="clothing"/>
<label for="women">女装</label>
<input type="radio" id="children" name="clothing"/>
<label for="children">童装</label>
<input type="radio" id="reset" name="clothing"/>
<label for="reset">重置</label>

実装手順

実装原理を理解した後は、記事の冒頭の例の効果を完了するのがはるかに簡単になります。

HTML

HTML の構造は実際には非常に単純です。input と label の一致と、フィルター対象の content 要素とその兄弟要素に注意するだけです。たとえば、この例では、コンテンツ要素の 3 つの主要なカテゴリ (紳士服.男性、婦人服.女性、子供服.子供) があります。

<p class="container">
    <!-- 必须保证input和label匹配 -->
    <input type="radio" id="men" name="clothing " />
    <label for="men">男装</label>
    <input type="radio" id="women" name="clothing "/>
    <label for="women">女装</label>
    <input type="radio" id="children" name="clothing "/>
    <label for="children">童装</label>
    <input type="radio" id="reset" name="clothing "/>
    <label for="reset">重置</label>
    <!-- 要被过滤的内容元素需要与input元素是兄弟元素 -->
    <p class="tile men">
        <img src="" alt="">
    </p>
    <p class="tile women">
        <img src="" alt="">
    </p>
    <p class="tile children">
        <img src="" alt="">
    </p>
    <!-- 此处省略N个.men、.women和.children元素 -->
</p>

SCSS

原理を理解していれば、より簡単になります。まず全体のコードを見てみましょう:

body{
  margin:0;
  text-align:center;
  font-family: Verdana;
  background:#f5f5f5;
}
h1 {
  text-align:center;
}
.container {
  width:90%;
  margin:0 auto;
}
input[type="radio"] {
  display:none;
}
label {
  width:23%;
  float:left;
  text-align:center;
  background:#ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  color:#222222;
  padding:0.5%;
  margin:0.5%;
  margin-bottom:30px;
  cursor:pointer;
}
input[type="radio"]{
  &[id="men"]:checked {
    * label {
      background:#6666ff;
    }
    ~ .women,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
  &[id="women"]:checked {
    * label {
      background:#ff4466;
    }
    ~ .men,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
  &[id="children"]:checked {
    * label {
      background:#66dd99;
    }
    ~ .men, 
    ~ .women {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
}
.tile {
  width:23%;
  float:left;
  transition:all 1s;
  margin:0.5%;
  padding:0.5%;
  background:#6666ff;
  img {
      width: 100%;
    }
}

このスタイル コードを簡単に分析します。

ページの見栄えを良くするために、まず を非表示にします:

input[type="radio"] {
  display:none;
}

ラベルの for 属性を使用してラジオが選択されるかどうかを制御します。ラベル スタイルを美しくする:

label {
    width:23%;
    float:left;
    text-align:center;
    background:#ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    color:#222222;
    padding:0.5%;
    margin:0.5%;
    margin-bottom:30px;
    cursor:pointer;
}

次のスタイル コードも最も重要な部分です。入力が選択されている場合、ラベル スタイルは次のとおりです:

input[type="radio"]{
  &[id="men"]:checked {
      label {
      background:#6666ff;
    }
  }
  ...
}

上記のコードは 選択すると、チェックすると、隣接するラベルの背景色が変わります。

前の原則の紹介によれば、「紳士服」を選択した場合、「婦人服」と「子供服」を非表示にする必要があることがわかります。ここでは、それらは偽のイメージ、つまり input[type] によって隠されています。 ="radio"] [id="men"] が選択され、その類似の兄弟要素 .women と .children が非表示になります:

input[type="radio"]{
  &[id="men"]:checked {
    ...
    ~ .women,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
}

其他两个选项也是类似的，就不在做过多的阐述。

美化的样式，这里就不说了，大家都懂的。

通过这个过程下来，你就能看到前面DEMO展示的效果了。
总结

本文主要介绍了如何依赖于CSS的属性选择器、通用相邻兄弟选择器和伪类选择器来实现一个简单的純粋な CSS を使用してフィルター メニュー機能を実装する的功能。在整个实例当中，要把握的是严谨的HTML结构，因为相邻兄弟选择器对于结构的依赖程度非常的强。也就是说结构修改之后，你的选择器和样式都要做一定的修改。
相关推荐：

最简洁的CSS学习笔记

全面总结css中属性值继承知识

css和js实现弹出登录居中界面教程

以上が純粋な CSS を使用してフィルター メニュー機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。