CSS three ways to implement navigation bar tab switching

Previous words

Navigation bar tab is very common in the page, this article said that the CSS implementation of the Navigation bar tab three ways

Layout

As shown, a number of definitions are defined first, and the whole module is called navigation, which consists of the navigation title and navigation content. To achieve the layout effect shown, there are two layout methods: Semantic layout and visual layout

"Semantic Layout"

From the semantic layout point of view, each navigation title and its corresponding navigation content should be a whole

<style>body,p{margin:0;} h2{margin:0;font-size:100%;}   Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;}. box{width:572px;border:1px solid #999; overflow:hidden;}. Nav{margin-left: -1px;font:14px "Microsoft Jas Black"; Overflow:hidden;background-color: #f1f1f1;}. Navi{float:left;width:33.333%;box-sizing:border-box;}. navi-tit{line-height:40px;text-align:center;cursor:pointer;border-left:1px solid #cecece; border-bottom:1px Solid # Cecece;}. Navi-txt{width:572px;height:200px;text-indent:2em;line-height:2;background: #fff;}. Ml1{margin-left:-100%;}. Ml2{margin-left:-200%;}. Navi_active{position:relative;z-index:1;}  </style><p class= "box" > <ul class= "nav" > <li class= "NavI navi_active" > 

"Visual Layout"

From a visual layout perspective, all navigation headings are a group, and all navigation content is a set of

<style>body,p{margin:0;} Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;}. box{width:572px;border:1px solid #999; font:14px "Microsoft Jas Black"; overflow:hidden;}. Nav-tit{margin-left: -1px;height:40px;line-height:40px;text-align:center;background-color: #f1f1f1; overflow: Hidden;}. nav-titi{box-sizing:border-box;float:left;width:33.333%;border-left:1px solid #cecece; border-bottom:1px Solid # Cecece;cursor:pointer;}. Nav-txt{height:200px;text-indent:2em; line-height:2;}. nav-txti{height:200px;} </style><p class= "box" > <nav class= "nav-tit" > <a class= "Nav-titi" > Courses </a> &L T;a class= "Nav-titi" > Learning program </a> <a class= "Nav-titi" > Skill map </a> </nav> <ul class= "NA V-txt "> <li class=" Nav-txti nav-txti_active "> Course content </li> <li class=" Nav-txti "> Learning Plan Content </ li> <li class= "Nav-txti" > Skills Atlas Content </li> </ul></p>

Hover

The function of the navigation bar is to display the corresponding navigation content when the navigation title is clicked. If you use pseudo-class hover to achieve similar effects, use the first layout method to make the semantic layout more appropriate

Because in a semantic layout, three navigation content is in an overlapping state. When the parent element is moved, the .navI hover state of the mouse is triggered, and the parent element is added to the style position:relative;z-index:1; . Thus raising the level z-index . In the hierarchy of its child navigation content, "Son by Parent", the parent element level is high, its navigation content in the overlapping state appears on the top

<style>body,p{margin:0;} h2{margin:0;font-size:100%;}   Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;}. box{width:572px;border:1px solid #999; overflow:hidden;}. Nav{margin-left: -1px;font:14px "Microsoft Jas Black"; Overflow:hidden;background-color: #f1f1f1;}. Navi{float:left;width:33.333%;box-sizing:border-box;}. navi-tit{line-height:40px;text-align:center;cursor:pointer;border-left:1px solid #cecece; border-bottom:1px Solid # Cecece;}. Navi-txt{width:572px;height:200px;text-indent:2em;line-height:2;background: #fff;}. Ml1{margin-left:-100%;}. Ml2{margin-left:-200%;}. Navi_active{position:relative;z-index:1;} /* key code */.navi:hover{position:relative;z-index:1;}. Navi:hover. Navi-tit{background: #fff; border-bottom:none;}  </style><p class= "box" > <ul class= "nav" > <li class= "NavI navi_active" > 

[Disadvantage]: When the initial state, the first navigation title can not be selected by default (white background, no underline); When the mouse moves out of the navigation module, the navigation content can not be fixed, display the first navigation content; When the mouse moves out of the navigation module, the navigation title style cannot be fixed, reverting to the default state


Anchor Point

The key to implementing the navigation bar is to establish a link between the navigation title and the navigation content, and the anchor point can achieve similar effects. By clicking on the anchor point, the page generates a hash value and jumps to the location of the corresponding content

When using anchor technology, both the semantic layout and the visual layout can be implemented.

"1" makes the semantic layout

When using a semantic layout, you can use a pseudo-class to target target change the style of the current caption when you click the navigation header by using the selector. Not only that, because you want to use the sibling selector, you need to change the HTML structure to move the HTML structure of the navigation header below the navigation content.

When you click on the navigation header, the pseudo-class is triggered, the target level of the corresponding navigation content is changed, so that the z-index current navigation content is won in three navigation content, and the style of the current navigation title is changed at the top.

<style>body,p{margin:0;} h2{margin:0;font-size:100%;}   Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;}. box{width:572px;border:1px solid #999; overflow:hidden;}. Nav{margin-left: -1px;font:14px "Microsoft Jas Black"; Overflow:hidden;background-color: #f1f1f1;}. Navi{float:left;width:33.333%;box-sizing:border-box;position:relative;}. Navi-tit{position:absolute;top:0;left:0;right:0;box-sizing:border-box;line-height:40px;height:40px;text-align: center;cursor:pointer;border-left:1px solid #cecece; border-bottom:1px solid #cecece;}. Navi-txt{width:572px;height:200px;margin-top:40px;text-indent:2em;line-height:2;background: #fff;}. Ml1{margin-left:-100%;}. Ml2{margin-left:-200%;}. Navi_active{z-index:1;} /* key code */.navi-txt:target{position:relative;z-index:1;}. Navi-txt:target ~. Navi-tit{background: #fff; border-bottom:none;} </style><p class= "box" > <ul class= "nav" > <li class= "NavI navi_active" > <p class= "Navi-txt" ID= "KC" > Course content </p> <a class= "Navi-tit" href= "#kc" > Courses </a> </li> <li CLA ss= "NavI" > <p class= "navi-txt ml1" id= "XX" > Learning Plan content </p> <a class= "Navi-tit" href= "#x X "> Learning Plan </a> </li> <li class=" NavI "> <p class=" navi-txt ml2 "id=" JN "> Skills Atlas Content </p> <a class= "Navi-tit" href= "#jn" > Skill map </a> </li> </ul> &LT;/P&G T
[Disadvantage]: The initial state of the default selected navigation heading style cannot be set, changed the HTML structure, anchor technology itself is limited to the anchor target will reach the visible area as far as possible, resulting in a page bounce

"2" Using visual layout

In a visual layout, three navigation content belongs to the same parent element, the same height as the parent element, and is arranged according to the arrangement of the block-level elements, the first navigation content is displayed by default when the parent element is set overflow hidden

When you click the navigation header, the corresponding navigation content reaches the navigation heading line below, achieves the navigation toggle effect

Use pseudo hover -classes to change the effect of the current navigation heading style

<style>body,p{margin:0;} Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;}. box{width:572px;border:1px solid #999; font:14px "Microsoft Jas Black"; overflow:hidden;}. Nav-tit{margin-left: -1px;height:40px;line-height:40px;text-align:center;background-color: #f1f1f1; overflow: Hidden;}. nav-titi{box-sizing:border-box;float:left;width:33.333%;border-left:1px solid #cecece; border-bottom:1px Solid # Cecece;cursor:pointer;}. Nav-txt{height:200px;text-indent:2em; line-height:2;}. nav-txti{height:200px;} /* key content */.nav-txt{overflow:hidden;}. Nav-titi:hover{background-color:white;border-bottom:none;} </style><p class= "box" > <nav class= "nav-tit" > <a class= "Nav-titi" href= "#kc" > Course </a&gt        ; <a class= "Nav-titi" href= "#xx" > Learning Plan </a> <a class= "Nav-titi" href= "#jn" > Skill map </a> </nav > <ul class= "nav-txt" > <li class= "Nav-txti nav-txti_active" id= "KC" > Course content </li> <lI class= "Nav-txti" id= "XX" > Study plan Content </li> <li class= "Nav-txti" id= "JN" > Skill map Content </li> </ul> </p>
[Disadvantage]: The initial state of the default selected navigation heading style cannot be set, Anchor Point technology itself is limited to the anchor target will reach the visible area as far as possible, which may generate page bounce, hover state and click state separate, may make the person dizzy; When the mouse moves out of the navigation module, the navigation title style cannot be fixed. Revert to default state


Label

The above uses anchor technology to contact the navigation title and navigation content, but label can also achieve similar effects. labelelement defines a callout for an input element and establishes the association of a text label with a form control. labeltapping text inside an element triggers this control, and when you select the text, the browser automatically shifts focus to the label-related form controls

labelwhen used, the semantic layout and visual layout can be implemented

"1" makes the semantic layout

When you use semantic layout, you use label labels to display navigation headings, and you need to use radio buttons with them <input type="radio"> . Use the pseudo-class to checked checked change the style of the current caption when you click the navigation header by using the selector. Not only that, because you want to use the sibling selector, you need to change the HTML structure, place the radio button at the top .navI of each element, then set it up, then the display:none <label> navigation title, and finally the <p> navigation content.

When you click on the navigation header, the pseudo-class is triggered, the checked level of the corresponding navigation content is changed, so that the z-index current navigation content is won in three navigation content, and the style of the current navigation title is changed at the top.

<style>body,p{margin:0;} h2{margin:0;font-size:100%;}  Ul{margin:0;padding:0;list-style:none;} input{margin:0;width:0;} A{text-decoration:none;color:inherit;}. box{width:572px;border:1px solid #999; overflow:hidden;}. Nav{margin-left: -1px;font:14px "Microsoft Jas Black"; Overflow:hidden;background-color: #f1f1f1;}. Navi{float:left;width:33.333%;box-sizing:border-box;}. navi-tit{display:block;line-height:40px;text-align:center;cursor:pointer;border-left:1px solid #cecece; border-bottom:1px solid #cecece;}. Navi-txt{position:relative;width:572px;height:200px;text-indent:2em;line-height:2;background: #fff;}. Ml1{margin-left:-100%;}. Ml2{margin-left:-200%;} /* key code */.navi-radio{display:none;}. Navi-radio:checked +. Navi-tit{background: #fff; border-bottom:none;}. navi-radio:checked ~. Navi-txt{z-index:1;} </style><p class= "box" > <ul class= "nav" > <li class= "NavI" > <input class= "n Avi-radio "Name=" NAV "type=" Radio "id=" KC "checked> &LT;label class= "Navi-tit" for= "KC" > Courses </label> <p class= "Navi-txt" > Course content </p>            </li> <li class= "NavI" > <input class= "navi-radio" name= "NAV" type= "Radio" id= "XX" > <label class= "Navi-tit" for= "XX" > Study plan </label> <p class= "Navi-txt ml1" > Learning Plan content </p> </li> <li class= "NavI" > <input class= "navi-radio" name= "NAV" type = "Radio" id= "JN" > <label class= "navi-tit" for= "JN" > Skill map </label> <p CLA ss= "Navi-txt ML2" > Skills Atlas Content </p> </li> </ul> </p>
[Disadvantage]:html structure is more complex

"2" Using visual layout

In a visual layout, three navigation content belongs to the same parent element, the same height as the parent element, and is arranged according to the arrangement of the block-level elements, the first navigation content is displayed by default when the parent element is set overflow hidden

When you click the navigation header, the corresponding navigation content reaches the navigation heading line below, achieves the navigation toggle effect

Use pseudo hover -classes to change the effect of the current navigation heading style

<style>body,p{margin:0;} Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;} Input{margin:0;padding:0;border:none;}. box{width:572px;border:1px solid #999; font:14px "Microsoft Jas Black"; overflow:hidden;}. Nav-tit{margin-left: -1px;height:40px;line-height:40px;text-align:center;background-color: #f1f1f1; overflow: Hidden;}. nav-titi{box-sizing:border-box;float:left;width:33.333%;border-left:1px solid #cecece; border-bottom:1px Solid # Cecece;cursor:pointer;}. nav-txt{height:200px;}. Nav-txti{height:200px;display:block;width:100%;text-indent:2em; line-height:2;} /* key content */.nav-txt{overflow:hidden;}. Nav-titi:hover{background-color: #fff; border-bottom:none;} </style><p class= "box" > <nav class= "nav-tit" > <label class= "Nav-titi" for= "KC" > Course </la bel> <label class= "Nav-titi" for= "XX" > Study plan </label> <label class= "Nav-titi" for= "JN" > Skill Map    Spectrum </label> </nav> <nav class= "Nav-txt" >    <input class= "Nav-txti nav-txti_active" id= "KC" value= "course content" readonly> <input class= "Nav-txti" id= "XX" value= "Learning Plan content" readonly> <input class= "Nav-txti" id= "Jn" value= "Skill map content" Readonly> &LT;/NAV&GT;&LT;/P&G T
[Disadvantage]: The initial state of the default selected navigation heading style can not be set, sometimes the effect of page bounce, hover state and click state separate, may make the person faint; When you move the navigation module, the style of the navigation title cannot be fixed, reverting to the default state


At last

Of the three methods above, the best way to achieve this is to use labels label with label mate radio types input , using :checked selectors to implement

In practical applications, the javascript way to control the navigation bar tab is more common