I am using zend navigation to create menus. I want to change the default class 'active' to 'selected' and I also want to add the class to anchor tag for active link.
Here is my sample code which I have put in bootstrap
protected function _initNavigation()
{
$pages = array(
array(
'module' => 'admin',
'label' => 'Services',
'resource' => 'admin',
'controller' => 'services',
'pages' => array(
array(
'module' => 'admin',
'label' => 'Add Services',
'controller' => 'services',
'action' => 'manage',
'route' => 'default',
),
array(
'module' => 'admin',
'label' => 'View Services',
'controller' => 'services',
'action' => 'view',
'route' => 'default',
),
),
)
);
$this->bootstrap('layout');
$layout = $this->getResource('layout');
$view = $layout->getView();
$config = new Zend_Config($pages);
$navigation = new Zend_Navigation($config);
$view->navigation($navigation);
}
In my view script at layout I have put this below code
echo $this->navigation()->menu()
->setUlId('menu');
Current Output
<ul class="navigation" id="menu">
<li class="active">
Services
<ul>
<li>
Add Services
</li>
<li class="active">
View Services
</li>
</ul>
</li>
Expected Output
<ul class="navigation" id="menu">
<li>
Services
<ul style='display:block;'>
<li>
Add Services
</li>
<li>
<a class='selected' href="/test/public/admin/services/view">View Services</a>
</li>
</ul>
</li>
You have to just set the registry for object 'view' at the end of '_initNavigation()' method in bootstrap.
Zend_Registry::set("view", $view);
Create plugin 'TestNavigation', in that add following code
public function routeShutdown(Zend_Controller_Request_Abstract $request)
{
foreach (Zend_Registry::get('view')->navigation()->getPages() as $page) {
foreach ($page->getPages() as $subpage){
$uri = $subpage->getHref();
if ($uri === $request->getRequestUri()) {
$subpage->setClass('selected');
}
}
}
}
that's it, you have done.
Related
I've managed to generate menu using Zend Navigation. However, the active page is never set (active class is not set for any <li> element).
My partial:
foreach ($pages as $page): ?>
<?php if (!$page->isVisible() || !$this->navigation()->menu()->accept($page)) continue; ?>
<li role="presentation" <?php if ($page->isActive()) echo 'class="active"' ?>>
<a href="<?php echo $page->getHref() ?>">
<?php if ($icon = $page->get('icon')) {
echo '<span class="' . $icon . '"></span>';
} ?>
<span> <?php echo $this->translate($page->getLabel()) ?> </span>
</a>
</li>
<?php endforeach ?>
Extract of module.config.php:
'navigation' => array(
'default' => array(
array(
'label' => 'Page 1',
'route' => 'application/default',
'namespace' => 'Application\Controller',
'controller' => 'Index',
'action' => 'page1',
'icon' => 'fa fa-2x fa-file-text',
'order' => 10,
),
array(
'label' => 'Page 2',
'route' => 'application/default',
'namespace' => 'Application\Controller',
'controller' => 'Index',
'action' => 'page2',
'icon' => 'fa fa-2x fa-file-text',
'order' => 20,
),
),
),
The menu is rendered properly on the page, but without any active class:
$partial = array('partial/menu.phtml', 'default');
echo $this->navigation('navigation')
->menu()
->setMinDepth(0)
->setMaxDepth(0)
->setPartial($partial);
After some research into ZF code, I've found something I don't understand (in Zend\View\Helper\Navigation\Menu.php):
// in renderNormalMenu function, line 288
$isActive = $page->isActive(true);
Any idea or suggestion regarding my problem?
Thanks a lot,
Problem was in module.config.php ; the isActive method (from Zend\Navigation\Mvc) was expected the "full" controller name (including namespace).
My config was splitting namespace and controller name, wich causes the issue.
Solution:
array(
'label' => 'Page 1',
'route' => 'application/default',
'controller' => 'Application\Controller\Index',
'action' => 'page1',
'icon' => 'fa fa-2x fa-file-text',
'order' => 10,
),
I have the following configuration for my navigation in my application module in Application/config/module.config.php:
'navigation' => array(
'default' => array(
array(
'label' => 'Home',
'route' => 'home'
)
)
)
I have the following configuration for my navigation in my cortana module in Cortana/config/module.config.php:
'navigation' => array(
'default' => array(
array(
'label' => 'Home',
'route' => 'cortana-home'
),
array(
'label' => 'Resources',
'route' => 'cortana-resources'
),
array(
'label' => 'Reports',
'route' => 'cortana-reports'
),
array(
'label' => 'Services',
'route' => 'cortana-services'
),
array(
'label' => 'System',
'route' => 'cortana-system'
)
)
)
Im using the layout in my Cortana modulle. Here is the navigation code:
<div class="collapse navbar-collapse">
<?php echo $this->navigation('navigation')
->menu()
->setMinDepth(0)
->setMaxDepth(0)
->setUlClass('nav navbar-nav');
?>
</div><!--/.nav-collapse -->
And finally, unfortunately my result compiles the following HTML:
<li>
Home
</li>
<li class="active">
Home
</li>
<li>
Resources
</li>
<li>
Reports
</li>
<li>
Services
</li>
<li>
System
</li>
</ul> </div><!--/.nav-collapse -->
As you can see, there is 2 home navigation pages. It looks like the code merged the Application navigation module and the Cortana navigation module.
What I need is to have a navigation for the Cortana module and then a separate navigation for the Application module.
UPDATE
I've also tried changing the navigation key to cortana-navigation the following:
/Cortana/config/module.config.php
'service_manager' => array(
'factories' => array(
'cortana-navigation' => 'Zend\Navigation\Service\DefaultNavigationFactory'
)
),
'cortana-navigation' => array(
'default' => array(
array(
'label' => 'Home',
'route' => 'cortana-home'
),
array(
'label' => 'Resources',
'route' => 'cortana-resources'
),
array(
'label' => 'Reports',
'route' => 'cortana-reports'
),
array(
'label' => 'Services',
'route' => 'cortana-services'
),
array(
'label' => 'System',
'route' => 'cortana-system'
)
)
)
And then in my Cortana layout (Cortana/view/layout/layout.phtml)
<div class="collapse navbar-collapse">
<?php echo $this->navigation('cortana-navigation')
->menu()
->setMinDepth(0)
->setMaxDepth(0)
->setUlClass('nav navbar-nav');
?>
</div><!--/.nav-collapse -->
And now my result compiled HTML is:
<ul class="nav navbar-nav">
<li>
Home
</li>
</ul> </div><!--/.nav-collapse -->
I unfortunately have no explanation for why its now using the Application navigation (navigation) instead of the (cortana-navigation) but it does mean that its responding to the change of factory
SECOND UPDATE
I did notice that in the file `Zend/Navigaiton/Service/DefaultNavigationFactory.php' :
class DefaultNavigationFactory extends AbstractNavigationFactory
{
/**
* #return string
*/
protected function getName()
{
return 'default';
}
}
This might mean something with using the default name
I am new in cakephp and i have to create a link with 2 tags like following html
<li><i class="fa fa-th-list"></i> <span>Shop</span></li>
And in cake php i did something like this:
<li><?php echo $this->Html->link(
// $this->Html->tag('i', array('class' => array('fa', 'fa-th-list'))),
$this->Html->tag('span', 'Video / Imagini', null),
array(
'controller' => 'users',
'action' => 'video',
),
array('escape' => FALSE)) ?></li>
How can i add the tag?
I search to internet and on cake book but no details about the second tag.
Thank you for your time.
Your code was almost correct. I made only some little changes:
<li><?php
echo $this->Html->link(
$this->Html->tag('i', '', array('class' => array('fa', 'fa-th-list'))) .
$this->Html->tag('span', 'Video / Imagini'),
array(
'controller' => 'users',
'action' => 'video',
),
array('escape' => false)
);
?></li>
I'm building a menu using ZF2 and bootstrap and I already have this kind of menu:
Home | Users | Options
But now I need submenus, but I couldn't find a way to do so. I need something like hover the menu item (Ex: User) and then show 'List', 'Add', 'Edit'
I would really appreciate any help.
Thanks
You can achieve this with a partial view.
In you configuration file e.g. config/autoload/global.php :
return array(
// Your others config arrays
'navigation' => array(
'default' => array(
array(
'label' => 'Home',
'route' => 'home',
),
array(
'label' => 'User',
'route' => 'user',
'pages' => array(
array(
'label' => 'List',
'route' => 'list',
),
array(
'label' => 'Add',
'route' => 'add',
),
array(
'label' => 'Edit',
'route' => 'edit',
),
),
),
array(
'label' => 'Options',
'route' => 'options',
),
)
)
);
In your layout file, e.g. view/layout/layout.phtml :
<nav>
<?php
echo $this->navigation('navigation')
->menu()
->setPartial('partial/menu')
->render();
?>
</nav>
The partial view, here view/partial/menu.phtml :
<ul>
<?php
foreach ($this->container as $page)
{
$hasChildren = $page->hasPages();
if( ! $hasChildren)
{
?>
<li><?php echo $page->getLabel(); ?></li>
<?php
}
else
{
?>
<li>
<?php echo $page->getLabel(); ?>
<ul>
<?php
foreach($page->getPages() as $child)
{
?>
<li><?php echo $child->getLabel(); ?></li>
<?php
}
?>
</ul>
</li>
<?php
}
}
?>
</ul>
If you need CSS samples you can find some in this answer :
https://stackoverflow.com/a/13328340/3294723
Good day,
I am lost on how to implement what I want in ZF2 since I'm new to it. I have a site that uses ZF2 and ZfcTwig module and I want my TWIG template to have a dynamic navigation based on the settings placed in my mysite.global.php. I want it to read the contents of my config array and create the main navigation using the contents and this will be implemented to all pages of my site.
I already created my layout.twig:
<div class="nav-collapse collapse">
<ul class="nav">
{% for item in navigation %}
<li {% if item.active %} class="active" {% endif %}>
<a href="{{ url(item.route) }}">
{{ translate(item.name) }}
</a>
</li>
{% endfor %}
</ul>
</div><!--/.nav-collapse -->
and my mysite.global.php
return array(
'mysite' => array(
'navigation' => array(
'home' => array(
'name' => 'Home',
'route' => 'home',
),
'profile' => array(
'name' => 'Profile',
'route' => 'myroute',
'active' => true
),
)
)
);
This is where I'm lost. How can I transfer my settings to my layout.twig so that every page that uses the layout will use the same items? I tried this code and placed it to my Module.php in the onBootstrap() method:
//get my settings and place it to $navigation then
$view = $e->getApplication('application')->getMvcEvent()->getViewModel();
$view->navigation = $navigation;
but it doesn't work. {{ navigation }} still contains an empty array. What am I doing wrong?
The solution which I used:
in module.config.php
'service_manager' => array(
'factories' => array(
'translator' => 'Zend\I18n\Translator\TranslatorServiceFactory',
'Navigation' => 'Zend\Navigation\Service\DefaultNavigationFactory',
),
),
.....
'navigation' => array('default' =>array(
array('label' => 'Home', 'route' => 'home', 'pages' => array(
array('label' => 'Profile', 'route' => 'myroute'),
),
),
),
),
And then in layout.twig
{{ navigation('navigation').menu() | raw }}
and
{{ navigation('navigation').breadcrumbs().render('navigation') | raw }}
And that's all, it should work and by the way, it uses Navigation helper