순수 CSS를 사용하여 필터 메뉴 기능 구현

이 글에서는 타오바오의 베이비 필터 메뉴와 같은 효과를 얻기 위해 순수 CSS를 사용하겠습니다. 비록 예제가 타오바오만큼 강력하지는 않지만, 조금만 노력하면 타오바오와 동일한 효과를 얻을 수도 있습니다. . 그것이 모두에게 도움이 되기를 바랍니다.

콘텐츠 필터링은 웹, 특히 전자상거래 웹사이트에서 흔히 사용되는 기능입니다. 이를 통해 사용자는 콘텐츠를 필터링하고 요구 사항에 맞는 콘텐츠만 표시할 수 있습니다. 스크린샷은 Taobao와 같이 이 기능을 더 잘 설명할 수 있습니다.

위 그림에 표시된 대로 사용자는 하나의 드레스를 구매하고 싶어합니다. , 전체 상품 목록에 너무 많은 상품이 표시되어 있습니다. 고객은 자신이 원하는 드레스를 선택하는 방법을 모릅니다. 상단에는 카테고리가 제공되며, 고객이 원하는 옵션을 선택하면 조건에 맞지 않는 상품이 필터링됩니다. 위 사진에서는 '우아한' 스커트를 선택했어요. 물론 더 많은 조건을 선택할 수도 있습니다. 여기서는 더 말하지 않겠습니다.

과거에는 이러한 효과를 얻으려면 JavaScript(또는 jquery 기반 플러그인)가 필요했다고 합니다. 예를 들어 코디하우스의 콘텐츠 필터링 예시입니다. 하지만 자바스크립트를 이해하지 못하는 학생(이해하지 못하는 것은 이유가 되지 않음)에게는 비슷한 기능을 구현하기가 참으로 어렵습니다. 시작).

다행히도 이제 JavaScript 없이도 인형을 구현할 수 있습니다. 즉, 순수 CSS를 이용하여 보다 간단한 기능을 갖춘 콘텐츠 필터를 구현하는 것은 어렵지 않습니다. 이것이 제가 오늘 여러분과 나누고 싶은 것입니다.

먼저 예시를 살펴보겠습니다

먼저 간단한 예시를 살펴보겠습니다. 페이지가 로드되면 다음과 같은 작업을 수행하면 예상치 못한 효과가 나타납니다.

"여성의류" 버튼을 클릭하시면 "남성의류", "아동의류"가 모두 필터링 됩니다

"남성의류" 버튼을 클릭하시면 "여성의류", "아동복"이 모두 필터링 됩니다 필터링됩니다

"아동복" 버튼을 누르면 "여성의류", "남성의류"가 필터링됩니다

물론 이 케이스의 기능은 타오바오만큼 NB는 아니지만 하오다이 콘텐츠 필터링과 유사한 기능도 완료했습니다.

구현 원리

이 기능을 구현하는 원리는 사실 그다지 복잡하지 않지만 다들 관심을 두지 않았습니다. 두 가지 측면으로 요약할 수 있습니다:

강력한 선택기

이 기능을 달성하려면 주로 범용 형제 선택기(E~F)와 의사 클래스 선택기에 의존합니다. 강력한 CSS 선택기에서 확인합니다. 라디오 버튼을 선택하면 다른 카테고리의 콘텐츠가 숨겨집니다.

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

위 스타일을 통해 해당 .women 및 .children 요소를 제어하려면 해당 요소와 입력 요소가 형제 요소인지 확인해야 합니다. 이는 아래에서 논의할 두 번째 핵심 사항이기도 합니다.

잘 어울리는 구조

CSS만 사용하여 이 기능을 생성하려면 엄격한 구조가 필요합니다. 구조의 무질서가 원하는 효과에 직접적인 영향을 미치기 때문입니다. 이것은 또한 단점입니다. 그 중 하나는 라디오 버튼 "radio"를 레이블과 일치시키는 것입니다. 보기 좋은 모양을 내기 위해 를 표시하고 싶지 않은 경우에는 라벨의 for 속성을 통해 선택된 "radio"를 제어해야 합니다. 따라서 입력의 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 구조는 실제로 매우 간단합니다. 입력과 레이블, 필터링할 콘텐츠 요소와 그 형제 요소의 일치에만 주의하면 됩니다. 예를 들어, 이 예에는 콘텐츠 요소의 세 가지 주요 카테고리(남성 의류.남성, 여성 의류.여성, 아동 의류.어린이)가 있습니다.

<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;
    }
  }
  ...
}

위 코드는 선택 시: 선택하면 인접한 레이블이 배경색을 변경합니다.

이전 원리 소개에 따르면 "남성복"을 선택하면 "여성복"과 "아동복"을 숨겨야 함을 알 수 있습니다. 여기서는 잘못된 이미지, 즉 입력[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 중국어 웹사이트의 기타 관련 기사를 참조하세요!