The web uses pure CSS to implement filtered menus

Content filtering is a common feature on the web, especially in the Electronic Business Web site, in order to allow users to filter content, only to display the content of their own requirements. Cut a picture, can better illustrate such functions, such as Taobao:

As shown in the figure above, the user wants to buy a skirt, in the entire product list, the number of products displayed is too large. Customers don't know how to choose the dress they need. A classification is provided at the top, the customer chooses the desired option, and the product will filter out the products that are not eligible. The image above chooses the "elegant temperament" skirt. Of course, you can also choose more conditions. I'm not going to talk about it here.

In other words, implementing such an effect in the past requires JavaScript (or jquery plug-ins). Examples of codyhouse content filtering, for example. But for a classmate who does not know JavaScript (do not understand is not the reason), to achieve a similar function, it is really difficult (I have firsthand experience, to cry no tears, who called the original did not read).

Fortunately, like today I can not use JavaScript to achieve. That is, pure CSS to achieve a simple function of a content filter, not difficult. This is also to share with you today.

Let's take a look at an example

First look at a simple example, the page load, there will be women's wear, men's and children's wear together, when you do the following operation, there are unexpected effects:

When you click on the "Women" button, "menswear" and "Children's wear" will be filtered out

When you click on the "Men" button, "women" and "children's wear" will be filtered out

When you click the "Children" button, "women" and "menswear" will be filtered out

Of course, the function of this case is not so NB Taobao, but the good stay is also completed a similar content filtering function.

Implementation principle

The principle of the implementation of this function is not too complicated, but we usually do not pay attention to. I have summed up two aspects:

A powerful selector

This functionality is largely dependent on the Universal Sibling selector (E~F) and pseudo class selector in the powerful CSS selector: checked. When a radio button is selected, the contents of other classes are hidden:

Input[type= "Radio"]{
&[id= "Men"]:checked {
~. Women,
~. children{
....
}
}
}

To control the corresponding. Women and. Children elements with the above style, you must ensure that elements and input elements are sibling elements. This is also the second key to be said below.

A good, matching structure

Only using CSS to make this function, need to have a rigorous structure, because the structure of the disorder will directly affect the needs of the effect. This is also one of the deficiencies. One of these is the use of radio button "Radio" and label matching. In order to look good, do not want to show <input type= "Radio", you need to use the label for properties to control the selected "Radio". The ID value of input is therefore matched to the for value of the label. In addition to all the name values of input, tell the browser that they belong to a group. Such as:

<input type= "Radio" id= "Men" name= "clothing"/>
<label for= "Men" > Men's </label>
<input type= "Radio" id= "Women" name= "clothing"/>
<label for= "Women" > Women's Wear </label>
<input type= "Radio" id= "Children" name= "clothing"/>
<label for= "Children" > Children's Wear </label>
<input type= "Radio" id= "reset" name= "Clothing"/>
<label for= "reset" > Reset </label>

Implementation steps

After understanding the implementation principle, it is much simpler to complete the example at the beginning of the article.

Html

The HTML structure is actually very simple, just pay attention to the matching of input and label and will filter the content element and its sibling element. For example, there are three main categories of content elements: Men's men, women's clothing, women and children's wear. Children.

<div class= "Container" >
<!--must ensure input and label matching-->
<input type= "Radio" id= "Men" name= "clothing"/>
<label for= "Men" > Men's </label>
<input type= "Radio" id= "Women" name= "clothing"/>
<label for= "Women" > Women's Wear </label>
<input type= "Radio" id= "Children" name= "clothing"/>
<label for= "Children" > Children's Wear </label>
<input type= "Radio" id= "reset" name= "Clothing"/>
<label for= "reset" > Reset </label>
<!--content elements to be filtered need to be the sibling element with the INPUT element-->
<div class= "Tile men" >

</div>
<div class= "Tile Women" >

</div>
<div class= "Tile Children" >

</div>
<!--here omit N. Men,. Women and. Children elements-->
</div>

Scss

Understand the principle, it is much simpler, first look at the overall code:

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

Simply parse the style code.

To make the page look good, first <input> hide:

Input[type= "Radio"] {
Display:none;
}

We control whether the radio is selected by using the For property of the label. To beautify the label style:

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

The next style code is also the most critical part of the label when input is selected:

Input[type= "Radio"]{
&[id= "Men"]:checked {
+ Label {
Background: #6666ff;
}
}
...
}

The above code represents the <input type= "Radio" id= "Men" > Selection: When checked, its adjacent label changes the background color.

According to the principle of the previous introduction, you can learn that when we choose the "men", then "women" and "children's wear" needs to be hidden, here through the false image to hide, that is, input[type= "Radio"][id= "Men"] selected, Its interlinked sibling elements. Women and. Children hidden away:

Input[type= "Radio"]{
&[id= "Men"]:checked {
...
~. Women,
~. Children {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
}
}

The other two options are similar, not too much elaboration.

Beautify the style, here will not say, we all understand.

Through this process, you can see the results of the previous demo show.
Summarize

This paper mainly introduces how to implement a simple content filtering function, which relies on the CSS attribute selector, the universal neighboring sibling selector and the pseudo class selector. In the whole case, the rigorous HTML structure is to be grasped, because the neighboring sibling selector is highly dependent on the structure. In other words, after the structure is modified, your selector and style must be modified.

The entire article down, is not feel very simple. If you are interested, you can use the case of the idea, through the "checkbox" button to achieve a number of content filtering effect. That is, the content that meets multiple conditions is displayed and does not conform to the hidden. Try it, you'll do it.