Talk about some interesting CSS topics (eight)--Plain CSS Navigation bar tab switch scheme

Folio series, talk about some interesting CSS topics, the topic type of unrestrained, think of what to say, not only to broaden the problem-solving ideas, but also related to some easy to ignore the CSS details.

Problem-solving does not consider compatibility, the topic of unrestrained, think of what to say, if you feel the problem in the CSS properties of the rare, hurriedly to cram it.

Constantly updated, constantly updated, constantly updated, important things to say three times.

Talk about some interesting CSS topics (i)--how to implement the vertical bar on the left

Talk about some interesting CSS topics (II.)--On the box model from the realization of stripe border

Talk about some interesting CSS topics (iii)--how much does stacking order and stack context know?

Talk about some interesting CSS topics (iv)--from the reflection, talk about CSS inheritance inherit

Talk about some interesting CSS topics (v)-Single-line center, two rows left, more than two lines omitted

Talk about some interesting CSS topics (vi)--Fully compatible multi-column uniform layout issues

Talk about some interesting CSS topics (vii)-Vanishing boundary problems

All topics are summarized on my Github.

8. The Navigation bar tab switching scheme of pure CSS

No Javascript , use CSS a pure scheme to implement a similar navigation bar switch:

The power of CSS is sometimes beyond our imagination, Tab switching, in general, it really needs a certain script to achieve. Let's see how to do the same thing with CSS.

The difficulty in implementing TAB switching is how to use CSS to receive user clicks and manipulate related nodes. That is:

1. How to receive Click events

2. How to manipulate related dom

Here's a look at how to implement the requirements using two different approaches:

Law One: :target pseudo-class selectors

First of all, the problem we're trying to solve is 如何接收点击事件 that the first method here is to use :target pseudo-class reception.

:targetCSS3 is a new pseudo-class that can be used to pick the target element of the current activity. Of course, with the anchor name # at the end of the URL, you can point to a specific element within the document. The linked element is the target element. It requires an ID to match the target in the document.

The explanation is hard to understand and look at the actual usage, assuming our HTML code is as follows:

<ul class= ' nav ' >    <li> list 1</li>    <li> list 2</li></ul><div> List 1 content :123456</div><div> List 2 content:abcdefgkijkl</div>

For use :target , HTML anchors and HTML fragments corresponding to anchor points are required. So the structure above is going to become:

<ul class= ' nav ' >    <li><a href= "#content1" > List 1</a></li> <li><a href=    "#content2" > List 2</a></li></ul><div id= "Content1" > List 1 Contents: 123456</div><div id= " Content2 "> List 2 content:abcdefgkijkl</div>

In this way, the <a href="#content1"> anchor point in the above #content1 corresponds to listing 1 <div id="content1"> . The anchor point 2 corresponds to the same list 2.

Next, we can use the :target receive-to-click event and manipulate the corresponding DOM:

#content1, #content2 {    display:none;} #content1: Target, #content2: target{    display:block;}

The above CSS code, the first page of the #content1 and #content2 are hidden, when clicked on the list 1 triggered href="#content1" , the page URL will change:

1. by www.example.com becomingwww.example.com#content1

2. The next step is to trigger #content1:target{ } this CSS rule, and the #content1 element display:none display:block is changed, and the Click on List 2 is also true.

This way, the TAB switch is reached. Of course, in addition to content1 content2 the switch, we have li to change the style of the elements, this time, we need to be in the DOM structure of the layout of the time to pay more attention to the time when the #content1:target trigger can be modified at the same time li the style.

On HTML the basis of the above, and then modify it, into the following structure:

<div id= "Content1" > List 1 Contents: 123456</div><div id= "Content2" > List 2 Contents: Abcdefgkijkl</div><ul class= ' nav ' >    <li><a href= "#content1" > List 1</a></li>    <li><a href= "# Content2 "> List 2</a></li></ul>

Comparing the similarities and differences with the above structure, I will just move ul from two content to below, why do we do this?

Because you need to use the sibling selector ~.

e~f{Cssrules}, CSS3 sibling selector (e~f), selects all sibling elements behind the E element F.

Note here, the most important sentence is that e~f can only select the F element after the E element, so the order is very important.

After this position is swapped, the entire style can be manipulated through the sibling selector ~ .nav .

#content1: Target ~ nav li{    //change the background color and font color of LI elements    &:first-child{        background: #ff7300;        Color: #fff;    }} #content2: Target ~ nav li{    //change the background color and font color of LI elements    &:last-child{        background: #ff7300;        Color: #fff;    }}

In the above CSS rules, we use the ~ selector to #content1:target control the #content2:target style of the two navigational elements separately and at the time of triggering li .

At this point two issues, 1. 如何接收点击事件 and 2. 如何操作相关DOM both have been resolved, the rest is some small-style repair work.

Demo poke me: pure CSS navigation switch (: Target pseudo-class implementation)

Law II: <input type="radio"> && <label for="">

The above method <a> receives a click event by adding a label to the page anchor point.

There is also a way to receive a click event, which is the checked form element that owns the attribute, <input type="radio"> or <input type="checkbox"> .

Suppose there is such a structure:

<input class= "NAV1" type= "Radio" ><ul class= ' nav ' >    <li> list 1</li></ul>

For the above structure, when we click on the <input class="nav1" type="radio"> single-box form element, the use :checked can capture the Click event.

. nav1:checked ~. Nav li {  //Style action}

Also used the Brother selector ~

This way, when you receive a click event for a FORM element, you can manipulate the style of its sibling elements through the sibling selector ~.

You can try clicking on the Radio box in the Codepen below.

However, here's a question for our Tab switch, to click on an <li> element, not a form element, so it's important here to use <label for=""> bound form elements. Look at the following structure:

<input class= "Nav1" id= "Li1" type= "Radio" ><ul class= ' nav ' >    <li><label for= ' li1 ' > List 1< /label></li></ul>

By using <label> a package <li> element, a <label> property for can be bound to a single form element.

Above <li> , there is a layer, which means that the <label for="li"> for="li1" binding ID of li1 form elements.

The for definition in the label tag: The For property specifies which form element the label binds to.

After this transformation, when we click on the <li> element, the equivalent of clicking on the <input class="nav1" id="li1" type="radio"> single box form elements, and this form element is clicked to select, and can be captured by :checked pseudo-class.

At this point, we can hide the form elements on the page so that clicking is the equivalent of clicking on the <li> form:

input{    Display:none;}

So, to apply this topic, we should build the following DOM structure:

<div class= "Container" >    <input class= "nav1" id= "Li1" type= "Radio" name= "NAV" >    <input class= " Nav2 "id=" Li2 "type=" Radio "name=" NAV ">    <ul class= ' nav ' >        <li class= ' active ' ><label for=" Li1 "> List 1</label></li>        <li><label for=" li2 "> List 2</label></li>    < /ul>    <div class= "Content" >        <div class= "Content1" > List 1 content:123456</div>        <div class= "Content1" > List 2 content:abcdefgkijkl</div>    </div></div>

Using two radio boxes, corresponding to two navigation options, using the label binding form described above and :checked receiving click events, a second solution can be obtained.

Look at the final result:

Demo poke me: pure CSS navigation Toggle (Label binding Input:radio && ~)

All topics are aggregated on my Github and sent to blogs hoping to get more communication.

To this end of this article, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

Talk about some interesting CSS topics (eight)--Plain CSS Navigation bar tab switch scheme