TAB-uri CSS

Pentru a folosi tab-uri ca instrument de partajare elegantă a informaţiei, putem folosi plugin-uri predefinite sau putem crea, ajutându-ne de CSS şi JavaScript. Pentru a evita, din varii motive, folosirea JS, redau două variante-surogat.

Butoane tip radio

Codul

<!DOCTYPE html>
<html>
  <head>
    <style>
      .taburi_css {
        position: relative;
        min-height: 200px; /* This part sucks */
        clear: both;
        margin: 25px 0;
      }
      .tab_css {
        float: left;
      }
      .tab_css label {
        background: #eee;
        padding: 10px;
        border: 1px solid #ccc;
        margin-left: -1px;
        position: relative;
        left: 1px;
      }
      .tab_css [type="radio"] {
        opacity: 0;
      }
      .contin {
        position: absolute;
        top: 28px;
        left: 0;
        background: white;
        right: 0;
        bottom: 0;
        padding: 20px;
        border: 1px solid #ccc;
        overflow: hidden;
      }
      .contin > * {
        opacity: 0;
        transform: translateX(-100%);
        transition: all 0.6s ease;
      }
      [type="radio"]:focus ~ label {
        ouline: 2px solid blue;
      }
      [type="radio"]:checked ~ label {
        background: white;
        border-bottom: 1px solid white;
        z-index: 2;
      }
      [type="radio"]:checked ~ label ~ .contin {
        z-index: 1;
      }
      [type="radio"]:checked ~ label ~ .contin > * {
        opacity: 1;
        transform: translateX(0);
      }
    </style>
  </head>
  <body>
    <div class="taburi_css">
      <div class="tab_css">
        <input type="radio" id="tab-1" checked>
        <label for="tab-1">Tab 1</label>
        <div class="contin">
          <p>          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.</p>
        </div>
      </div>
      <div class="tab_css">
        <input type="radio" id="tab-2" >
        <label for="tab-2">Tab 2</label>
        <div class="contin">
          <p>          Phasellus porttitor malesuada est vel laoreet. Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.</p>
        </div>
      </div>
      <div class="tab_css">
        <input type="radio" id="tab-3" >
        <label for="tab-3">Tab 3</label>
        <div class="contin">
          <p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
            enim ac dui.</p>
          <p>Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p>
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.taburi_css {

position: relative;

min-height: 200px; /* This part sucks */

clear: both;

margin: 25px 0;

}

.tab_css {

float: left;

}

.tab_css label {

background: #eee;

padding: 10px;

border: 1px solid #ccc;

margin-left: -1px;

position: relative;

left: 1px;

}

.tab_css [type="radio"] {

opacity: 0;

}

.contin {

position: absolute;

top: 28px;

left: 0;

background: white;

right: 0;

bottom: 0;

padding: 20px;

border: 1px solid #ccc;

overflow: hidden;

}

.contin > * {

opacity: 0;

transform: translateX(-100%);

transition: all 0.6s ease;

}

[type="radio"]:focus ~ label {

ouline: 2px solid blue;

}

[type="radio"]:checked ~ label {

background: white;

border-bottom: 1px solid white;

z-index: 2;

}

[type="radio"]:checked ~ label ~ .contin {

z-index: 1;

}

[type="radio"]:checked ~ label ~ .contin > * {

opacity: 1;

transform: translateX(0);

}

</style>

</head>

<body>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.</p>

</div>

<p> Phasellus porttitor malesuada est vel laoreet. Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.</p>

</div>

<p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus

enim ac dui.</p>

<p>Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p>

</div>

</body>

</html>

Rezultatul

Lorem ipsum dolor

Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.

Phasellus porttitor

Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.

Ut sed dictum dolor

Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus.

Sursa: CSS-Tricks.com

Folosirea pseudo-clasei TARGET

Pentru a nu mai repeta conţinutul, puteţi vizualiza modul de realizare de tab-uri, în această modalitate, accesând următorul link.

Folosirea DETAILS+SUMMARY

Codul

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
    <style>
      .det_sum_ext { 
        height: auto;
        position: relative;
        border: 0px solid green; 
        margin-top:20px;}
      .det_sum_in {
        margin: 0;
        position: absolute;
        top: 0%;
        left: 0%;
        -ms-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        width:100%;
        height: auto;
        border: 0px solid red; }
      details summary {
        list-style: none;
        float:left;
        position: fixed;
        top: 0;
        left: 10px;
        border:3px outset lightgrey;
        padding:5px 10px;
        margin:-20px 0 0 0;
        width:27%;}
      details > summary:before
      , details[open] summary:before {
        border-radius: 5px; 
        content: "f07b";
        font-family: 'Font Awesome 5 Free'; 
        font-weight: 900;
        color: #000;
        display: block; 
        float: left; 
        font-size: 1.5em; 
        margin: -4px 10px 0 10px; 
        padding: 0; 
        text-align: center; 
        width: 20px; }
      details[open] summary:before {content: "f07c"; color: #f00;}            
      details summary:after { 
        content: "";
        display: block;
        clear: both; }
      details summary#s1 {left:0;}
      details summary#s2 {left:33%;}
      details summary#s3 {left:66%;}
    </style>
  </head>
  <body>
    <div class="det_sum_ext">
      <div class="det_sum_in">
        <details>      
          <summary id="s1">Lorem ipsum dolor sit amet</summary>
          <h5>Sectiunea 1</h5> <p>Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.</p>
        </details>
        <details>
          <summary id="s2">Phasellus porttitor malesuada</summary>
          <h5>Sectiunea 2</h5> <p>Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.</p>
        </details>
        <details>
          <summary id="s3">Ut sed dictum dolor</summary>
          <h5>Sectiunea 3</h5> <p>Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p>
        </details>
      </div>
    </div>   
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.det_sum_ext {

height: auto;

position: relative;

border: 0px solid green;

margin-top:20px;}

.det_sum_in {

margin: 0;

position: absolute;

top: 0%;

left: 0%;

-ms-transform: translate(0%, 0%);

transform: translate(0%, 0%);

width:100%;

height: auto;

border: 0px solid red; }

details summary {

list-style: none;

float:left;

position: fixed;

top: 0;

left: 10px;

border:3px outset lightgrey;

padding:5px 10px;

margin:-20px 0 0 0;

width:27%;}

details > summary:before

, details[open] summary:before {

border-radius: 5px;

content: "f07b";

font-family: 'Font Awesome 5 Free';

font-weight: 900;

color: #000;

display: block;

float: left;

font-size: 1.5em;

margin: -4px 10px 0 10px;

padding: 0;

text-align: center;

width: 20px; }

details[open] summary:before {content: "f07c"; color: #f00;}

details summary:after {

content: "";

display: block;

clear: both; }

details summary#s1 {left:0;}

details summary#s2 {left:33%;}

details summary#s3 {left:66%;}

</style>

</head>

<body>

<summary id="s1">Lorem ipsum dolor sit amet</summary>

<h5>Sectiunea 1</h5> <p>Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.</p>

</details>

<summary id="s2">Phasellus porttitor malesuada</summary>

<h5>Sectiunea 2</h5> <p>Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.</p>

</details>

<summary id="s3">Ut sed dictum dolor</summary>

<h5>Sectiunea 3</h5> <p>Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p>

</details>

</div>

</body>

</html>

Rezultatul

Lorem ipsum dolor

Sectiunea 1

Phasellus porttitor

Sectiunea 2

Ut sed dictum dolor

Sectiunea 3

Şi, totuşi, puţin JS

Dacă, la exemplul anterior, am dori ca, la deschiderea unui tab, să se închidă anteriorul deschis, putem folosi un pic de JavaScript, prin plasarea într-un script localizat înaintea închiderii etichetei Body. Astfel, la etichetele details am putea adăuga o funcţie pentru evenimentul onClick; astfel, vom avea la fiecare secţiune: <details onclick="fc_inchid_tab(fc_tab_activ(this));">

    <script type="text/javascript">
      function fc_tab_activ(tabul){
        var pcte = tabul.parentNode.childNodes, pct;
        var i = 0, count = i;
        while( (pct=pcte.item(i++)) && pct!=tabul )
          if( pct.nodeType==1 ) count++;
        return count;
      }

      function fc_inchid_tab(index){
        var len = document.getElementsByTagName("details").length;

        for(var i=0; i<len; i++){
          if(i != index){
            document.getElementsByTagName("details")[i].removeAttribute("open");
          }
        }
      }
    </script>

function fc_tab_activ(tabul){

var pcte = tabul.parentNode.childNodes, pct;

var i = 0, count = i;

while( (pct=pcte.item(i++)) && pct!=tabul )

if( pct.nodeType==1 ) count++;

return count;

}

function fc_inchid_tab(index){

var len = document.getElementsByTagName("details").length;

for(var i=0; i<len; i++){

if(i != index){

document.getElementsByTagName("details")[i].removeAttribute("open");

}

</script>

Rezultatul

Lorem ipsum dolor

Sectiunea 1

Phasellus porttitor

Sectiunea 2

Ut sed dictum dolor

Sectiunea 3

Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.
Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.

L	Ma	Mi	J	V	S	D
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

TAB-uri CSS

Butoane tip radio

Codul

Rezultatul

Folosirea pseudo-clasei TARGET

Folosirea DETAILS+SUMMARY

Codul

Rezultatul

Sectiunea 1

Sectiunea 2

Sectiunea 3

Şi, totuşi, puţin JS

Rezultatul

Sectiunea 1

Sectiunea 2

Sectiunea 3

Alte articole (posibil) interesante

Author: Ovidiu.S

Leave a ReplyCancel reply

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Butoane tip radio

Codul

Rezultatul

Folosirea pseudo-clasei TARGET

Folosirea DETAILS+SUMMARY

Codul

Rezultatul

Sectiunea 1

Sectiunea 2

Sectiunea 3

Şi, totuşi, puţin JS

Rezultatul

Sectiunea 1

Sectiunea 2

Sectiunea 3

Partajează asta:

Alte articole (posibil) interesante

Author: Ovidiu.S

Leave a ReplyCancel reply

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Etichete