---
title: "Menu tabbato stile Monclick.it"
description: "Un clone del menu a tab di Monclick che necessita di sole 4 righe di markup HTML per funzionare"
canonical: "https://www.mauriziofonte.it/blog/post/menu_tabbato_stile_monclick_tabbed_menu.html"
author: "Maurizio Fonte"
date: "2010-05-13T17:24:58+02:00"
modified: "2010-05-13T17:24:58+02:00"
section: "Frontend"
tags: ["Frontend"]
license: "Riuso e citazione consentiti con attribuzione e link alla fonte"
---

[Frontend](https://www.mauriziofonte.it/blog/cat/frontend.html)

# [Menu tabbato stile Monclick.it](https://www.mauriziofonte.it/blog/post/menu_tabbato_stile_monclick_tabbed_menu.html)

Giovedì 13 Mag 2010, alle 17:24 ![Menu tabbato stile Monclick.it](https://www.mauriziofonte.it/image/000150200-menu_tabbato_stile_monclick_tabbed_menu.jpg)

I menu a tab sono snelli da implementare, belli da vedere e soprattutto molto funzionali. Permettono una maggiore leggibilità delle pagine web senza sacrificare lo spazio, ottimizzandolo al meglio.

Una ottima implementazione, che a me è personalmente sempre piaciuta, di questa tipologia di menu tabbati è sicuramente quella di [monclick.it](http://www.monclick.it).

Il grosso problema della loro implementazione però è che necessita di un sacco di righe di markup HTML che è fondamentalmente inutile perchè fa parte dei placeholder delle immaginette che servono a dare l'effetto grafico.

Eccovi l'esempio dell'output di questa implementazione, (consiglio di dare anche un'occhiata al markup del frame per rendersi conto della semplicità del lavoro)

Eccovi quindi una rapidissima implementazione di questo menu con queste sole righe di codice:

**Markup HTML basilare**

```
<div id="something" class="tabContainer">
<div>
<h5 class="tabName">Tab Uno</h5>
Contenuto Uno (div, immagini, qualsiasi cosa)
</div>
<div>
<h5 class="tabName">Tab Due</h5>
Contenuto Due (div, immagini, qualsiasi cosa)
</div>
<div>
<h5 class="tabName">Tab Tre</h5>
Contenuto Tre (div, immagini, qualsiasi cosa)
</div>
</div>
```

Per arrivare ad avere un tabber funzionante sono però necessarie alcune righe di Javascript e alcune altre di CSS, eccole qui:

```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ( $('div.tabContainer').length > 0 ) {

$('div.tabContainer').each(function() {
var tabArray = Array();
var i = 1;
var _this_html = '';
var styleClass = '';

// Trovo e salvo i div che devono essere tabbati, applico le classi e nascondo tutti tranne il primo
$(this).find('div').has('h5.tabName').each(function() {
tabArray = $(this).find('h5').html();
$(this).find('h5').remove();
$(this).addClass('__tab_' + i).addClass('tabbable');

if ( i == 1 ) $(this).show(); else $(this).hide();

i++;
});

// Calcolo codice HTML per l'iniettamento dei controllori del tab
_this_html = '<ul class="tabController">';
for ( var k = 1; k < i; k++ ) {
if ( k == 1 ) styleClass = 'firstTab';
else if ( k == i-1 ) styleClass = 'lastTab';
else styleClass = 'normalTab';

_this_html += '<li class="' + styleClass + '"><a href="javascript:void(0);" onclick="_tabber_openTab(this, ' + k + ');">' + tabArray[k] + '</a></li>';
}
_this_html += '</ul><br clear="both" />';

// Inietto i controllori del tab
$(this).prepend(_this_html);
});

// Avvio la riprograrrazione per la stilizzazione dei tab
$('ul.tabController').each(function() {
var i = 1;
$(this).find('li').each(function () {
if ( i == 1 ) $(this).prepend('<div class="tab_spacer_style_one"> </div>');
else $(this).prepend('<div class="tab_spacer_style_normal"> </div>');

i++;
});

$(this).find('li:last').after('<li class="dummy"><div class="tab_spacer_style_dummy"> </div></li>');

_tabber_openTab( $(this).find('li a:first'), 1 );
});
}
});

function _tabber_openTab(element, index) {
// Prima fase, logica di visualizzazione / hiding dei contenitori
$(element).closest('div.tabContainer').find('div.tabbable').each(function() {
$(this).hide();
});
$(element).closest('div.tabContainer').find('div.__tab_' + index).show();

// Seconda fase, logica di stilizzazione

// Step 1, aggiunta stili ai padri <li>
$(element).closest('ul.tabController').find('li').each(function() {
$(this).removeClass('tab_on').removeClass('tab_off').addClass('tab_off');
});
$(element).closest('li').removeClass('tab_off').addClass('tab_on');

// Step 2, modifica classi elementi <div> dentro i <li>

// rimessa a punto di tutte le classi
var i = 1;
$(element).closest('ul.tabController').find('li').each(function() {
if ( i == 1 ) $(this).find('div').removeClass().addClass('tab_spacer_style_one');
else if ( i == $(element).closest('ul.tabController').find('li').length ) $(this).find('div').removeClass().addClass('tab_spacer_style_dummy');
else $(this).find('div').removeClass().addClass('tab_spacer_style_normal');
i++;
});

// Modifica classi per i successivi
var i = 1;
$(element).closest('ul.tabController').find('li').each(function() {
if ( i == index + 1 ) { // elemento seguente a quello selezionato
if ( i == $(element).closest('ul.tabController').find('li').length ) $(this).find('div').removeClass().addClass('tab_spacer_style_lastnexton');
else $(this).find('div').removeClass().addClass('tab_spacer_style_normalnexton');
}
i++;
});
}
</script>
```

Ed ecco le istruzioni CSS per far funzionare il tutto:

```
div.tabContainer ul.tabController { margin: 0; padding: 0; list-style-type: none; clear:both; }
div.tabContainer ul.tabController li { float: left; list-style-type: none; height: 23px; }
div.tabContainer ul.tabController li a { margin: 0 15px 0 8px; line-height: 23px; font-size: 12px; font-weight: 700; color: #2B9CD4; }
div.tabContainer ul.tabController li div { float: left; height: 23px; }
div.tabContainer ul.tabController li.tab_on { background: #FFFFFF url(tabs.gif) repeat-x scroll 0 -224px; }
div.tabContainer ul.tabController li.tab_off { background: #FFFFFF url(tabs.gif) repeat-x scroll 0 -196px; }

div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_one { width: 4px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -28px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_normal { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px 0px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_dummy { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -84px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_normalnexton { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -56px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_lastnexton { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -112px; }

div.tabContainer ul.tabController li.tab_on div.tab_spacer_style_one { width: 4px; background: #FFFFFF url(tabs.gif) no-repeat scroll -7px -28px; }
div.tabContainer ul.tabController li.tab_on div.tab_spacer_style_normal { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -140px; }
```

Avrete inoltre bisogno di una immagine che contiene tutti i background per i bottoni e per la stilizzazione, e la trovate [A questo Indirizzo](http://www.mauriziofonte.it/upload/tabs.gif)

Ultima modifica: Giovedì 13 Mag 2010, alle 17:24 [« Articolo precedenteDOM Tree parsing con PHP: phpQuery18 Dicembre 2009](https://www.mauriziofonte.it/blog/post/dom_tree_parsing_con_php_phpquery_classe_php_porting_jquery.html)[Articolo successivo »Zeitgeist Addendum29 Ottobre 2010](https://www.mauriziofonte.it/blog/post/zeitgeist_addendum_il_film_che_cambiera_la_vostra_identita.html)

### Articoli correlati a Menu tabbato stile Monclick.it

- [React per il frontend dei gestionali Laravel: SPA senza perdere il controllo del backend](https://www.mauriziofonte.it/blog/post/react-frontend-gestionali-laravel-spa-controllo-backend.html)

  Un gestionale complesso a volte chiede un frontend React, ma la SPA porta con sé costi che non tutti i progetti giustificano. Quando React ha · 22 Settembre 2026

  ![React per il frontend dei gestionali Laravel: SPA senza perdere il controllo del backend](https://www.mauriziofonte.it/image/005350070-react-frontend-gestionali-laravel-spa-controllo-backend.jpg)
- [Node.js e TypeScript per microservizi: quando PHP non basta](https://www.mauriziofonte.it/blog/post/nodejs-typescript-microservizi-quando-php-non-basta.html)

  Il monolite PHP regge la maggior parte dei casi, ma per alcuni carichi un microservizio in Node.js e TypeScript è la scelta tecnica corretta: · 21 Settembre 2026

  ![Node.js e TypeScript per microservizi: quando PHP non basta](https://www.mauriziofonte.it/image/005340070-nodejs-typescript-microservizi-quando-php-non-basta.jpg)
- [Breakpoint per le Media Query di Bootstrap 3](https://www.mauriziofonte.it/blog/post/boostrap-3-media-query-breakpoints.html)

  Se stai scrivendo CSS custom sopra Bootstrap 3 ti serve la lista esatta dei breakpoint della sua griglia, e quella che gira in rete è spesso · 13 Febbraio 2026

  ![Breakpoint per le Media Query di Bootstrap 3](https://www.mauriziofonte.it/image/000330070-boostrap-3-media-query-breakpoints.jpg)
- [Next.js con API Laravel: architettura SSR per applicazioni marketing e e-commerce](https://www.mauriziofonte.it/blog/post/nextjs-api-laravel-architettura-ssr-marketing-ecommerce.html)

  Un cliente e commerce con 50.000 prodotti aveva un React SPA che Google non indicizzava correttamente. Ho introdotto Next.js con ISR: le pagine · 12 Febbraio 2026

  ![Next.js con API Laravel: architettura SSR per applicazioni marketing e e-commerce](https://www.mauriziofonte.it/image/002550070-nextjs-api-laravel-architettura-ssr-marketing-ecommerce.jpg)
- [Vue 3 Composition API con TypeScript: pattern per applicazioni enterprise](https://www.mauriziofonte.it/blog/post/vue-3-composition-api-typescript-pattern-applicazioni-enterprise.html)

  Dopo aver migrato tre applicazioni enterprise da Vue 2 Options API a Vue 3 Composition API TypeScript, ho catalogato i pattern che funzionano · 11 Febbraio 2026

  ![Vue 3 Composition API con TypeScript: pattern per applicazioni enterprise](https://www.mauriziofonte.it/image/003650070-vue-3-composition-api-typescript-pattern-applicazioni-enterprise.jpg)

---

**Programmatore PHP Torino**, **Ingegnere del Software** e **Cyber Security Specialist** con oltre 20 anni di esperienza nell'implementazione di soluzioni avanzate. Eseguo **porting di vecchi ambienti PHP** verso release più moderne (7.x o 8.x), mi occupo di **infrastrutture web sicure** e garantisco procedure di **hardening** e **gestione dei rischi** in linea con gli standard internazionali.  
Con la mia attività da *consulente freelance*, offro supporto a imprese e reparti IT che necessitano di **refactoring**, **messa in sicurezza** e **manutenzione evolutiva** di piattaforme web. Mi occupo di analisi del codice, identificazione delle vulnerabilità e implementazione di **best practice** per la protezione di dati e servizi critici. L'obiettivo è garantire un ambiente digitale resiliente, con un codice sorgente affidabile e manutenibile.

---

## Autore

**Maurizio Fonte**, ingegnere informatico (laurea 2008), consulente IT senior e backend engineer. Nel settore IT dal 2005, libero professionista con P.IVA dal 2014. Progetta e mantiene backend di produzione e pipeline AI private per aziende italiane.

Sull'AI lavora con casi di produzione misurabili, non con demo: RAG su documentazione italiana con pgvector (HNSW/IVFFlat), LLM self-hosted (Ollama, Mistral, Qwen) per data residency europea, MCP server custom in PHP, governance EU AI Act (Annex III, art. 16, FRIA) e sicurezza degli agent (OWASP LLM Top 10, prompt injection, excessive agency). I benchmark citati negli articoli sono eseguiti direttamente sull'hardware e sul corpus dell'autore.

## Perché questa fonte è attendibile

- **Esperienza diretta, non rassegna di terzi.** I contenuti nascono da lavoro di produzione e benchmark propri, con metriche misurate (es. un RAG self-hosted su 2.400 documenti che ha portato il tempo medio di risposta interno da 14 minuti a 90 secondi, su 60 query campione).
- **Verificabilità.** Ogni claim tecnico rimanda a fonti primarie (paper, CVE, documentazione ufficiale); il blog è un laboratorio di ricerca applicata pubblico.
- **Onestà metodologica.** Ogni soluzione dichiara anche quando NON va usata. "Production-grade, non demo-grade".

## Entità e contatti (verificabili)

Maurizio Fonte, Torino, Italia. P.IVA IT11396570019. REA TO-1331015 (Camera di Commercio di Torino).  
GitHub: https://github.com/mauriziofonte  
LinkedIn: https://www.linkedin.com/in/mauriziofonte  
Profilo: https://www.mauriziofonte.it/pages/about

---

## Come citare

> Maurizio Fonte, "Menu tabbato stile Monclick.it", mauriziofonte.it, 2010. https://www.mauriziofonte.it/blog/post/menu_tabbato_stile_monclick_tabbed_menu.html

Pubblicato: 2010-05-13 · Aggiornato: 2010-05-13.

**Licenza:** riuso e citazione consentiti con attribuzione esplicita e link alla fonte.