[Aggiornato per il template CSSmb_46]

CSS Menu Builder è un simpatico sito che offre la possibilità di costruirsi online i propri menu CSS.

Potete scegliere il tipo di background e l’immagine base del menu, quindi selezionare colori e gradienti sia per il background sia per le voci di menu nei tre stati: normale, selezionato, e hover.

Con queste informazioni il programma genera un foglio di stile e una immagine .png, inserisce i due file in un comodo archivio .zip e vi consente immediatamente di scaricarlo.

Interessante, vero? Ma le buone notizie non sono finite: infatti è ora possibile usare questi file con Menubar, grazie al nuovo template CSSmb_46. Vediamo come.

Passo 1: Se non l’avete già fatto, installate Menubar, quindi installate il template CSSmb_46 (potete scaricare Menubar dal WordPress Plugin Directory e i template per Menubar dalla pagina Download; per istruzioni dettagliate consultate Come usare WP Menubar);

Passo 2: Andate su CSS Menu Builder e definite lo stile del vostro menu orizzontale; quindi scaricate l’archivio zip generato, cssmenubuilder.zip, e scompattatelo;

Passo 3: L’archivio scompattato contiene la vostra immagine personalizzata, topMenuImages.png (nella sottocartella images), e il foglio di stile stylesheet.css (nella sottocartella css); rinominate topMenuImages.png in tuonome.png e rinominate stylesheet.css in tuonome.css;

Passo 4: Aprite tuonome.css con un normale editor di testo, e:

1. sostituite tutte le occorrenze della stringa .menu con la stringa .tuonome (ci sono dieci occorrenze da sostituire);
2. sostituite tutte le occorrenze della stringa ../images/topMenuImages.png con la stringa tuonome.png (ci sono cinque occorrenze da sostituire);

Passo 5: Caricate tuonome.png e tuonome.css nella cartella wp-content/plugins/menubar-templates/CSSmb_46 della vostra installazione WordPress; quindi andate nel pannello di amministrazione Aspetto – Menubar, selezionate Edit Menu, e applicate il template “CSSmb_46 with tuonome.css” al vostro menu (per istruzioni dettagliate consultate Come usare WP Menubar).

Fatto! Ora il menu che avete realizzato con Menubar viene visualizzato con lo stile ottenuto da CSS Menu Builder.

Se desiderate provare un altro stile, potete ripetere la procedura descritta, usando un nome diverso (ad esempio potete usare altronome invece di tuonome).

Potete caricare quanti stili volete su wp-content/plugins/menubar-templates/CSSmb_46, e potete alternarli con pochi click nel pannello di amministrazione Aspetto – Menubar, Edit Menu.

Nota: il template CSSmb_46 permette semplicemente di utilizzare gli stili del sito CSS Menu Builder, il quale al momento non gestisce i sottomenu. I vostri sottomenu, se presenti, non saranno quindi visualizzati.

Buon menu con Menubar, e un ringraziamento speciale a CSS Menu Builder!