ZF2 Navigation Menu con integrazione di Twitter Bootstrap

1 Gen

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 1 gennaio 2014). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

Dato che Twitter Boostrap (v3) è il front-end framework più utlizzato, nonchè quello “installato” di default con la ZendSkeletonApplication vediamo come aggiornare il Navigation Menu Helper affinchè si adatti alla Navbar di Boostrap.

Problema

Il problema principale è che di default il navigation menu helper rende, logicamente, un menù con sintassi neutra:

E fin qui tutto bene. Tuttavia in caso di sotto menù renderà qualcosa tipo:

che male si adatta alla Navbar di Boostrap.

Soluzione

Una soluzione sarebbe quella di rendere un menù ad unica profondità:

Tuttavia in questo modo non risolviamo il problema ma lo bypassiamo.
La soluzione migliore sarebbe quella si utilizzare i partials per rendere il menù all’interno di un nostro template.
Il nostro partial potrebbe essere qualcosa di simile a questo:
application/navigation/mynav.phtml

A questo punto possiamo usare la Navigation factory di default (\Zend\Navigation\Service\DefaultNavigationFactory) oppure crearcene una propria:

Quindi in un config file:

Nella layout view:

Esempio utlizzo:

Conclusioni

Da tenere presente che così com’è scritto il partial tiene in considerazione un solo livello di profondità.
Inoltre al fine di supportare il caret in caso di menù con sottolivelli e le icone sulle voci del menù l’helper è venuto piuttosto “laborioso”.
Se avessimo rinunciato a questi avremmo potuto utilizzare il metodo htmlify() del Zend\View\Helper\Navigation\Menu che avrebbe reso il codice un po’ più snello.
Il metodo ritorna una stringa contenente un elemento ‘a’ per la pagina data se l’href non è vuoto, ed un elemento ‘span’ se questo è vuoto.

Github

https://github.com/simogrima/Zf2-TwitterBoostrap-NavigationMenu

Risorse

http://framework.zend.com/manual/2.1/en/modules/zend.navigation.view.helper.menu.html
http://stackoverflow.com/questions/14884572/zend-framework-2-navigation-menu-twitter-bootstrap-integration

Lascia un commento