用純CSS實現篩選選單功能

本文我們來用純css實現像淘寶寶貝篩選菜單那樣的效果，例子雖然沒有淘寶那樣強大，不過原理差不多，如果花點心思也可以實現和淘寶一樣的。希望能幫助大家。

內容過濾是Web上常見的功能，特別是在電商網站，為了讓使用者過濾內容，只顯示符合自己的要求的內容。截張圖來說，能更好的說明這樣的功能，例如淘寶網：

#

##如上圖所示，使用者想購買一件裙子，在整個產品清單中，顯示的產品數量太多了。顧客不知道如何選擇自己所需的裙子。在頂部提供了一個分類，顧客選擇需要的選項，產品中就會過濾掉不符合條件的產品。上圖選擇了」氣質優雅「的裙子。當然還可以選擇更多的條件。這裡就不我多說了。 話說回來，以前實現這樣一個效果都需要藉助於JavaScript(或基於jquery插件)來做。例如CodyHouse的內容過濾範例。但對於一枚不懂JavaScript的同學來說(不懂不是理由)，要實現類似的一個功能，的確是一件難事(偶有切身體會，欲哭無淚，誰叫當初沒好好讀書)。

所幸的事，如今天偶也可以不借助JavaScript來實現。也就是純CSS來實作一個功能簡單一點的內容過濾器，不是難事。這也是今天要跟大家分享的。

先來看一個範例

先來看一個簡單的範例，頁面載入時，會有女裝、男裝和童裝一起出現，當你做下面的操作時，有意想不到的效果：

當你點擊”女裝“按鈕時，”男裝“和”童裝“都會被過濾掉當你點擊”男裝“按鈕時，”女裝「和」童裝「都會被過濾掉

當你點擊」童裝「按鈕時，」女裝「和​​」男裝「都會被過濾掉

當然這個案例的功能沒有淘寶網的那麼NB，但好待也是完成了一個類似內容過濾的功能。

實作原理


實現這個功能的原理其實不太複雜，只是大家平常並未註意過。我歸納起來就是兩個方面：

強大的選擇器


#實現這個功能，主要依賴強大的CSS選擇器中的通用兄弟選擇器(E~F)和偽類選擇器:checked。當某個單選按鈕選取時，其他類別的內容隱藏起來：

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

要透過上面樣式來控制對應的.women和.children元素，必須保證元素與input元素是兄弟元素。這也是下面要說的第二個關鍵之處。

好、相符的結構


只利用CSS來製作這個功能，需要有嚴謹的結構，因為結構的錯亂直接會影響到需要的效果。這也是其中不足之處。其中之一就是藉助單選按鈕」radio「和label匹配。為了外觀的好看，不想顯示，需要透過label的for屬性來控制選取的」radio「。所以input的id值要跟label的for值相符。另外所有的input的name值一樣，告訴瀏覽器，他們是屬於一組的。如：

<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的匹配以及將要過濾內容元素與其是兄弟元素。比如此例，內容元素主要有三類：男裝.men、女裝.women和童裝.children。

######

<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="/static/imghw/default1.png"  data-src="" alt="  class="lazy"   alt="">
    </p>
    <p class="tile women">
        <img src="/static/imghw/default1.png"  data-src="" alt="  class="lazy"   alt="">
    </p>
    <p class="tile children">
        <img src="/static/imghw/default1.png"  data-src="" alt="  class="lazy"   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;
}

###我們透過label的for屬性來控制radio有沒有選取。美化label樣式：#########

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選取之後label的樣式：#########

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

###上面的程式碼表示的是選擇中:checked時，其相鄰的label改變背景顏色。 ######根據前面的原理介紹，可以得知，當我們選擇了」男裝“，那麼”女裝“和”童裝“就需要隱藏，在這裡通過假像來隱藏，也就是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中文網其他相關文章！