Skip to main content
slide interna5

Menù a tendina con SwMenuFree

Scritto il

menu-tendaE' possibile creare dei semplici menù a tendina in joomla! quando non si dispone di un menù nativo? Tutto questo è possibile con SwMenuFree un componente che al primo impatto sembra essere complicato ma, una volta capito il processo di personalizzazione, apparirà semplice ed efficace.



JOOMLA! 2.5

Menù a tendina con SwMenuFree

swmenufree 0

 

E' possibile creare dei semplici menù a tendina in joomla! quando non si dispone di un menù nativo?

Tutto questo è possibile con SwMenuFree un componente che al primo impatto sembra essere complicato ma, una volta capito il processo di personalizzazione, apparirà semplice ed efficace.

Come funziona SwMenuFree e come si installa?

Per prima cosa iniziamo con il download dell'ultima versione. Una volta scaricato eseguire l'operazione di installazione in joomla! (Estensioni/Gestione estensioni > Carica & Installa)

Una volta installato swmenufree in Componenti potremo visualizzare l'interfaccia che vi apparirà difficile ma vi assicuro che non sarà cosi.

Scorriamo fra i vari TAB (Menu Module Settings - Size, Position & Offsets - Backgrounds & Indicators - Fonts & Text - Borders & Corners) per cominciare a familiarizzare con il componente.

Cliccando su ognuno di loro si potrà visualizzare il contenuto che mostra tutte le varianti per la personalizzazione del nostro menù a tendina.


Qui di seguito nei vari screenshot spiegherò
passo, passo come creare un semplicissimo menu a tendiana con joomla!

 

SCREENSHOT – MENU MODULE SETTING

swmenufree 1

 
  • > Menu Source Settings:
    •   - menu system: possiamo tranquillamente lasciare la voce MyGous Menu
    •   - menu source: da qui possiamo selezionare il menu da mostrare nelle nostre pagine
    •   - parent: possiamo lasciare la voce TOP
    •   - maximum levels: serve per indicare il livello di profondità dei link da mostrare nei menu
    •   - active menu: mostra il background della voce attiva
    •   - load style sheet: per richiamare fogli di stile esterni, interni oppure nessun foglio di stile
  • > Menu Hacks: serve per risolvere problemi relativi a: resisoluzione schermo, browser utilizzati etc.. vi consiglio di fare dei test
  • > Auto Menu Item Settings: permette di mostrare le voci associate alle categorie e agli articoli
  • > Special Effects: permette di inserire effetti dinamici, vi consiglio di provarli.
 

 

SCREENSHOT – SIZE, POSITION & OFFSETS

swmenufree 2

 
  • > Menu Position and Orentation: permette di allineare ed orientare il nostro menu a seconda delle nostre esigenze
  • > Menu Item Sizes: serve per definire altezza e larghezza del nostro menu o sub menu
  • > Top Menu Offsets: serve per distanziare il nostro modulo dal margine top e left rispettivo alla sua posizione
  • > Sub Menu Offsets: permette, come per il "top menu offests", di distanziare i margini top e left rispetto al "top menu"
  • > Complete Menu Padding: consente di definire il padding rispetto al top menu (verificare in Preview il Top Menu Margin, Top Menu
        Padding e Sub Menu Padding)
 

 

SCREENSHOT – BACKGROUND & INDICATORS

swmenufree 3

 
  • > Background Image: carica le immagini di sfondo per ogni stato del nostro menu e sub menu
  • > Background Color: assegna il colore di sfondo ad ogni stato del nostro menu e sub menu

 

 

SCREENSHOT – FONTS & TEXT

swmenufree 4

 
  • > Sub Menu Indicator: permette inoltre di assegnare all'indicatore di ogni voce di menu e sub menu un colore ed un'immagine...
        a voi la scelta!
  • > Font Family: permette di scegliere la famiglia dei font
  • > True Type Fonts: assegna true type di default ma ne carica anche di nuovi
  • > Font Colors: è possibile assegnare un colore
  • > Font Size: assegna dimensioni (in pixel) diverse al menu e al sub menu
  • > Font Weight: definisce lo spessore del font che può variare fra (normal, bold, bolder o lighter)
  • > Text Alignment: imposta l'allineamento
  • > Text Wrapping: assegna il wrap text
  • > Additional Text styling: aggiunge uno styling addizionale
 

 

SCREENSHOT – BORDERS & CORNERS

swmenufree 5

 
  • > Border Weight: sarà possibile assegnare uno Spessore al bordo Top Menu / Sub Menu Outside e Inside in pixel
  • > Border Styles: sarà possibile assegnare uno Style al Top Menu / Sub Menu Outside e Inside
  • > Border Colors: sarà possibile assegnare uno Colore al Top Menu / Sub Menu Outside
  • > Complete Menu Corner Styling: sarà possibile assegnare uno stile di corner diverso
  • > Top Menu Corner Styling: sarà possible eliminare oppure scegliere un Corner diverso e modificarne i parametri
  • > Sub Menu Corner Styling: sarà possible eliminare oppure scegliere un Corner diverso e modificarne i parametri
 

 

/|\---------------------/|\

 

Per tutti coloro che si avvicinano la prima volta al CSS consiglio di leggere
(Fonte Wikipedia: http://it.wikipedia.org/wiki/CSS )

 

Nota
Vi ricordo inoltre che il componente free agisce su un solo menu ed un solo modulo per la versione PRO
http://www.swmenupro.com/

Esempi
http://www.swmenupro.com/component/swmenupro/

Video
http://www.swmenupro.com/products/swmenufree-video.html