What are tabs in layout. How to make adaptive tabs (tabs) using css without using scripts. CSS styles for tabs using css3 point by point

Good evening! Today I will tell you how you can make tabs (tabs) in pure css3 without any use of jquery or other scripts. As you already know, the fewer scripts you use, the better for your site, and the faster it will work. And site speed today is one of the most important indicators of its ranking in search engines.

So let's begin

Adaptive tabs using pure css and without scripts

Today there are tabs on almost every website. They are necessary in order to display multiple areas of content without the user navigating to other pages. For example, in one of my projects to develop an online store on Joomla, I added two tabs that would display 3 products of two types: “best sellers” and “latest”. The decision was made to make them using pure CSS without reloading the site with unnecessary scripts.

So let's get started.

HTML code for tabs using css3 point by point

1. First of all, we need to create div with class "tabs".

2. We directly add toggle buttons with the name “tabs”, when clicked they will include the contents of our tabs.

3. Add their name via label

4. Under the buttons that we made in steps 1-3, we add the content that we need to display. In my case, these are the last three products and the top three products.

Each block has a class tab-content and identifiers tab-content-1 and tab-content-2.

Final HTML of our future tabs

Bestsellers

Latest

At this point we are done with writing our html. Agree, there was nothing complicated here. So let's move on.

CSS styles for tabs using css3 point by point

Now the most interesting and difficult part. We need to make our tabs tabs that will switch when clicked :)

Since we will have two tabs, we need to assign them a width so that they fit on the screen and do not go beyond its line. For this we write width 50%. If you have a different number of tabs, then calculate the width based on their number.

Also, note that by default, we make our radio buttons invisible

Tabs ( max-width: 90%; float: none; list-style: none; padding: 0; margin: 75px auto; border-bottom: 4px solid #ccc; ) .tabs:after ( content: ""; display: table; clear: both; ) .tabs input ( display:none; ) .tabs label p ( padding: 5px; margin-right: 0; ) .tabs label ( display: block; float: left; width: 50%; color : #ccc; font-weight: normal; text-align: 2; cursor: box-shadow: 0 4px; bottom: 4px solid #ccc; -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ transition: all 0.5s; ) .tabs label span ( display: none; ) .tabs label: hover ( color: # 3498db; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; .tab-content (display: none; width: 100%; float: left; padding: 15px; box-sizing: border- box; background-color:#ffffff )

How to make it work

And here everything is simple.

Add the following css code

Tabs :checked + label ( background: #FFF; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; color: #3498db; ) #tab-first:checked ~ #tab-content-1, #tab-second:checked ~ #tab-content-2 ( display: block; )

In the lines above we add a special style for the active tab using :checked + label

#tab-first:checked ~ #tab-content-1- this line says that we need to display content that has id=”tab-content-1″, If tab-first has the status checked.

Making our tabs adaptive

@media (min-width: 768px) ( .tabs p ( padding: 5px; margin-right: 10px; ) .tabs ( max-width: 750px; margin: 50px auto; ) )

Well, that's essentially all. Our tabs are ready :). You can change them as you like, add or remove them. Thanks for your attention :)

Not long ago, we looked at the implementation of tabs with content, without connecting javascript, using exclusively .
Today I want to introduce you to another, no less interesting solution for creating a compact block of tabs built on pure CSS3 and using adaptive layout elements. As in the first option, nothing superfluous and cumbersome, the very minimum of CSS code, and you will have at your disposal an adaptive block with switchable tabs that will fit perfectly into any section of the page, be it a separate message, a side column, or a modal window.

What changes were made relative to the first version?
First of all, the tab block has become adaptive, i.e. when viewed on mobile devices, the size of the tabs changes depending on the screen size of the user devices, the title text is removed and only font-icons remain, indicating the meaning of the content of one or another.
The font icons are from , the collection is very rich and, moreover, absolutely free. You can integrate icons into any project using a downloaded set of fonts, or connect them to your css style file directly from the developer’s website via @import using the following line:

@import url( "http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css") ;

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

In the demo example, this is exactly what I did, so by looking at the source code, you can easily figure out what’s what.
The structure of tabs in Html is quite simple. Basic div container, link and directly sections

, in which certain content is hidden for the time being. All! Nothing superfluous, no js libraries, no additional image files in the design, the appearance of the tabs, as well as their functionality, is formed exclusively using CSS. Of course, using the new CSS3 standards does not guarantee stable operation in all browsers without exception, but in modern versions, tabs work perfectly. IE displays tabs correctly starting from version 9. So if you are not indifferent to the psyche and feelings of perception of users who stubbornly use older versions of this “browser”, it is better not to use this method of creating tabs, but using jQuery.

HTML

< div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "Tab 1" >Tab 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Tab 2" >Tab 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Tab 3" >Tab 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Tab 4" >Tab 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p>Post any content here... < section id= "content-tab4" > < p>Post any content here...

Tab 1 Tab 2 Tab 3 Tab 4

To organize the content blocks I used the tag

from the HTML5 clip, which is used, in most cases, to divide a document into sections that are different in meaning and content, with the ability to use your own first-level headings

.
Switching tabs occurs through the interaction of the checked attribute in the tag and the pseudo-class:checked , tightly linked through identifiers in CSS. It is in the processing of this method that the old, famous slowdown in the progress of Internet Explorer 8 stumbles; from version 9 everything works in the best possible way.
Smoothly we come to the most interesting part, to styling our tabs using the magic of CSS. Here things are even simpler, there is no point in specifically describing each property and parameters, I wrote some explanations in the source code, so I think it won’t be difficult to figure out what goes where and why, but if you have questions or find an error, write in the comments, I will definitely answer, and I'll help.

CSS3

/* Basic tab container */. tabs ( min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto; ) /* Styles the content sections */. tabs> section ( display: none; padding: 15px; background: #fff; border: 1px solid #ddd; ) . tabs> section> p ( margin: 0 0 5px; line-height: 1.5; color: #383838; /* add animation */- webkit- animation- duration: 1s; animation- duration: 1s; - webkit- animation- fill- mode: both; animation-fill-mode: both; - webkit- animation- name: fadeIn; animation-name: fadeIn; ) /* Describe the animation of the opacity property */@- webkit- keyframes fadeIn ( from ( opacity: 0 ; ) to ( opacity: 1 ; ) ) @ keyframes fadeIn ( from ( opacity: 0 ; ) to ( opacity: 1 ; ) ) /* Hide checkboxes */. tabs> input ( display: none; position: absolute; ) /* Styles of tab switches */. tabs> label ( display: inline- block; margin: 0 0 - 1px; padding: 15px 25px; font- weight: 600; text- align: center; color: #aaa; border: 0px solid #ddd; border-width: 1px 1px 1px 1px; background: #f1f1f1; border-radius: 3px 3px 0 0 ; /* Font icons from Font Awesome in Unicode format */. tabs> label: before ( font- family: fontawesome; font- weight: normal; margin- right: 10px; ) . tabs> label[ for *= "1" ] : before ( content: " \f 19a"; ) . tabs> label[ for *= "2" ] : before ( content: " \f 17a"; ) . tabs> label[ for *= "3" ] : before ( content: " \f 13b"; ) . tabs> label[ for *= "4" ] : before ( content: " \f 13c"; } /* Changes the style of tab switches on hover */. tabs> label: hover ( color: #888; cursor: pointer; ) /* Styles for the active tab */. tabs> input: checked+ label ( color: #555; border- top: 1px solid #009933; border- bottom: 1px solid #fff; background: #fff; ) /* Activating sections using the pseudo-class:checked */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display: block; ) /* Remove text from switches * and leave icons on small screens */@media screen and (max-width: 680px) ( . tabs> label ( font-size: 0 ; ) . tabs> label: before ( margin: 0 ; font-size: 18px; ) ) /* Change the padding * of switches for small screens */@media screen and (max-width: 400px) ( . tabs> label ( padding: 15px; ) )

/* Basic tab container */ .tabs ( min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto; ) /* Content section styles */ .tabs>section ( display: none; padding : 15px; background: #fff; border: 1px solid #ddd; ) .tabs>section>p (margin: 0 0 5px; line-height: 1.5; color: #383838; /* attach the animation */ -webkit-animation -duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; opacity properties */ @-webkit-keyframes fadeIn ( from ( opacity: 0; ) to ( opacity: 1; ) ) @keyframes fadeIn ( from ( opacity: 0; ) to ( opacity: 1; ) ) /* Hiding the checkboxes * / .tabs>input ( display: none; position: absolute; ) /* Styles of tab switches */ .tabs>label ( display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font- weight: 600; text-align: center; border: 0px solid #ddd; border-width: 1px 1px 1px; background: #f1f1f1; border-radius: 3px 3px 0 0; ) /* Font-icons from Font Awesome in Unicode format */ .tabs>label:before ( font-family: fontawesome; font-weight: normal; margin-right: 10px; ) .tabs>label:before ( content: " \f19a"; ) .tabs>label:before ( content: "\f17a"; ) .tabs>label:before ( content: "\f13b"; ) .tabs>label:before ( content: "\f13c"; ) /* Changes the style of tab switchers on hover */ .tabs>label:hover ( color: #888; cursor: pointer; ) /* Styles for the active tab */ .tabs>input:checked+label ( color: #555; border -top: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; ) /* Activating sections using the pseudo-class: checked */ #tab1:checked~#content-tab1, #tab2:checked~# content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display: block; ) /* Remove text from radio buttons * and leave icons on small screens */ @media screen and (max -width: 680px) ( .tabs>label ( font-size: 0; ) .tabs>label:before ( margin: 0; font-size: 18px; ) ) /* Change the padding of * switches for small screens */ @ media screen and (max-width: 400px) ( .tabs>label ( padding: 15px; ) )

You can design the tabs () in any way you like, everything in the example is just an example, my momentary vision of the product, nothing more. You can find out the Unicode values of the font icons you need on the developer’s website; to do this, just click on the selected icon and copy the issued digital code, something like this: \f13b .
Please note that when you reduce the size of the browser window, the tabs automatically adjust to the current size up to a certain value (in the example 680px), after this value, the text titles of the tabs disappear, leaving icons. This ensures maximum compactness of the entire block of tabs; all that remains is to choose the right icons that match the meaning of the presented content inside the tabs.

Watch a live example of how tabs work, download the sources, experiment with the parameters, and create, create, create...

If you are tired of working with English-language templates and dream of a chance to use Russian-language templates, then you will definitely be happy with some great news. The TemplateMonster marketplace now has the ready-made solutions you need. Yes, yes, on the site you can now find the best ones. Localized templates are exactly what you need if you want to build your online project in a minimum amount of time. In addition to the fact that the texts for the templates were written manually, they have all the necessary tools to create a professional website.

Best regards, Andrey

Tabs in my opinion, they are one of the best solutions for thematic structuring of information, as well as for compactly providing content to the user on one page. Today we will figure out how to create such a functional thing without using Javascript using just HTML and CSS3.

To create tabs we will use tag input and CSS selector :checked. First of all, we need to create the page markup in HTML

Tab One Tab Two Tab Three

Clicking on radio boxes will activate the corresponding tabs. First input set the attribute checked="checked", this will make the first tab open by default. We will hide the radio boxes themselves, and to click on them we will use the tag label. In the block .tabs_cont We will have blocks with tabs in which the content (text, pictures, etc.) will be placed. So far everything is simple.

Let's move on to CSS styles

Tabs ( position: relative; margin: 0 auto; width: 800px; ) .tabs label ( color: #555; cursor: pointer; display: block; float: left; width: 150px; height: 45px; line-height: 45px ; position: relative top: 2px; text-align: center ) .tabs input ( position: absolute; left: -9999px; ) #tab_1:checked ~ #tab_l1, #tab_2:checked ~ #tab_l2, #tab_3:checked ~ #tab_l3 ( background: #fff; border-color: #fff; top: 0; z-index: 3; ) .tabs_cont ( background: #fff; position: relative; z-index: 2; height: 230px; )

Here we use styles to create a tag label block element and set its dimensions, location and appearance (you can set your own styles for the background and borders) as we require, and also hide input's using absolute positioning.

Next comes the same selector :checked which we mentioned at the beginning. In simple words, if a radio box with id #tab_1 selected/checked, then styles are applied to the block with id #tab_l1 and so on by analogy. In our case, we apply styles to the selected tab title. Well, at the end we set styles for the block with the tab content.

Our next task is to make sure that our tabs can be switched. To implement this task, the following styles:

Tabs_cont > div ( position: absolute; left: -9999px; top: 0; opacity: 0; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; transition : opacity .5s ease-in-out; ) #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3 ( position: static; left: 0; opacity : 1;

Pure CSS Tabs

Radio version of tabs. Requirements: not rely on specific IDs for CSS (the CSS shouldn't need to know specific IDs), flexible for any number of unkown tabs , accessible. Caveats: since these are checkboxes the tabs not tab-able, need to use arrow keys .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -