Tabs in Html5 e Css3


30 novembre 2010 5 Commenti css3, html5

Oggi vedremo come realizzare un semplicissimo sistema di tabs con pochissime righe di css3 e html5.

Tempo fa avevo descritto come fare il tutto con jquery, oggi invece vedremo come realizzare il tutto in css3 & html5 ( ovviamente ricordo che il tutto è funzionante su tutti i browser che supportano i due nuovi linguaggi ).

Questa è la sintassi di html5:

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
32
33
34
35
36
37
38
39
40
<!doctype html>

<head>

<meta charset="utf-8">

<title>Sistema di tabs in html5 & css3</title>

<link href="main.css" rel="stylesheet">

</head>
<body>

<nav>

<ul>
<li><a href='#uno'>Primo testo</a>
<li><a href='#due'>Secondo</a>
</ul>
</nav>

<div id='contenitore'>

<hgroup id='uno'>

Contenuto 1

</hgroup>


<hgroup id='due'>

Contenuto 2

</hgroup>

</div>

</body>
</html>

Mentre questo è il nostro foglio di stile:

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
32
33
34
35
36
37
* {
font: Normal 12px Arial;
text-align: center;
}
h2 {
font: Normal 20px Arial;
font-weight: bold;
}
nav {
margin: 0px auto;
padding: 0px;
text-align: center;
}
nav li {
display:inline;
margin-left: 10px;
margin-right: 10px;
list-style: none;
}
#contenitore {
width: 500px;
margin: 0px auto;
padding: 0px;

}
#contenitore hgroup {
width: 500px;
opacity:0;
-moz-transition: opacity .4s linear;
-webkit-transition: opacity .4s linear;
-o-transition: opacity .4s linear;
position: absolute;
}
#contenitore hgroup:target {
opacity: 1;
z-index: 1;
}

Ovvimente qua troviamo un pratico esempio. Alla prossima ;)



Potresti trovare interessante anche

foto_gallery_css3_html5 Realizziamo una lightbox in css3 e html5 Realizziamo una semplice Gallery Fullscreen con i Css3 slideshow_css3
Pubblicato in css3, html5 |


Iscriviti alla newsletter

Vuoi ricevere ogni articolo che pubblico direttamente sulla tua mail ? Vuoi evitare di perdere qualsiasi articolo pubblico ? Registrati alla mia newsletter in un click.

Inserisci il tuo indirizzo mail:

5 commenti per Tabs in Html5 e Css3


lucapost

24 giugno 2011 alle 15:41

Ciao, complimenti per il sito.
Sto provando a gestire le tab utilizzando questo metodo. Il sito ha due colonne, main e nav.
Utilizzando questo metodo a comparsa l’altezza della pagina è governata dalla colonna nav, essendo inizialmente più alta della main.
Quello che si verifica è che quando seleziono una tab nel main il suo contenuto si accavalla al footer, ed in particolare non mi modifica l’altezza della pagina.
Sai indicarmi come risolvere questo problema?
Grazie, Luca.
 


lucapost

24 giugno 2011 alle 16:10

mi sembra di aver capito che è un problema legato allo z-index, non sono molto esperto, potresti aiutarmi?

Ciao @lucapost grazie mille per i complimenti , mi fa piacere che ci ti piaccia il blog :D

Quello che ti posso consigliare è quello di mettere una altezza non fissa ma mobile , oppure di adattare il contenuto della tab al contenitore genitore.

Nel primo caso

——————————

#contenitore {
width: 500px;
margin: 0px auto;

height: 10%;
padding: 0px;

}

——————————-

Spero sia stato d’aiuto per te e fammi sapere come va ;)

 


lucapost

24 giugno 2011 alle 20:40

#cont {
margin: 0px auto;
padding: 0px;
}

#cont hgroup {
width: 460px;
display: block;
-webkit-transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}

#cont hgroup:target {
opacity: 1;
height: auto;
min-height: 100%;
}

ho risolto così!
ora stavo vercando una soluzione per poter annidiare queste tab, qualche consiglio?

@lucapost Ottima soluzione , per il resto ti sconsiglio di annidare le tab per un motivo semplice ( la sintassi non è rispettosa dello standard quindi meglio evitare di giocare troppo con i tag html5 , potresti avere problemi nella validazione ).

Se hai bisogno di altro non esitare a scrivere sul blog :D

Lascia un Commento