Categorie
PHP

ZF2 Navigation Menu con integrazione di Twitter Bootstrap

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

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.