Creiamo menu Tabs con Jquery


22 ottobre 2010 6 Commenti javascript, jquery

Tra le tante chicche che ci porta Jquery di c’è quella di creare simpaticcimise tabs con poche righe di codice.

Ma cosa sono le tabs? Le tabs sono delle linguette che quando vengono selezionate permettono di far comparire un informazione particolare.

Per fare tutto c’ho utilizzeremo il plugin idTabs di SunSean.

Ma andiamo a vedere come strutturare il nostro script:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<title>Tabs con Jquery</title>

<style>


a {
color: #ffffff;
text-decoration: none;
backgrond-color: #ffffff;
}
ul.idTabs li  {
float: left;
padding: 10px;
text-decoration: none;
background: #cc0000;
color: #ffffff;
}
.tabcontainer div {
clear:left;
padding: 10px;
background: #fff;
}
ul.idTabs li a.selected {
background: #fff;
color: #444;
}

</style>


<script type="text/javascript"  src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>

</head>
<body>

<div class="tabcontainer">
<ul class="idTabs">
 <li><a href="#uno">Link1</a>
 <li><a href="#due">Link2</a>
 <li><a href="#tre">Link3</a>
</ul>

<div id="uno">Ebug è il miglior blog :)</div>

<div id="due">Sono soddisfatto di Ebug</div>

<div id="tre">Ebug - Discussioni da web designer</div>

</div>


</body>
</html>

Qua puoi trovare un esempio, oppure puoi scaricare il file da qui.

Alla prossima :)



Potresti trovare interessante anche

menu_css3_effetto_fade_e_radius 112 99 lavalamp_menu_jquery
Pubblicato in javascript, jquery |


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:

6 commenti per Creiamo menu Tabs con Jquery


vincenzo

22 ottobre 2010 alle 10:49

Perche’ la maggior parte degli esempi non funzionano con IE

lol io lo vedo benissimo con ie6 XD


Matteo Mangoni

22 ottobre 2010 alle 17:46

Anche se non c’entra con il tutorial in sé, io metterei anche un bel “list-style: none;” per aumentare la leggibilità delle voci nelle tab :)


Matteo Mangoni

22 ottobre 2010 alle 17:48

Intendo con Firefox, si vedono i tondini bianchi delle liste :)

@Matteo Mangoni

Ciao, hai raggionissima vado e correggo :)


Tabs in Html5 e Css3 « Ebug – Discussioni da Web Designer

30 novembre 2010 alle 08:58

[...] fa avevo descritto come fare il tutto con jquery, oggi invece vedremo come realizzare il tutto in css3 & html5 ( ovviamente ricordo che il tutto [...]

Lascia un Commento