Friday, January 18, 2013

Looking into Advanced Zend_Navigation - Part 2

Continued from Looking into Zend_Navigation - Part 1

Choose A Menu...


Now that we have the basic in place how about some tweaks? May be you don't want to style your menu yourself. You have found a cool and FREE jquery menu - something like this one, that you want to use. (Of course you can have your own favorite. But once you have understood the way things go you can have your own pick).



Lets see how to get this done using Zend_Navigation.

First download the menu files from here.

Incorporate The Menu In Your Application...


Unzip it in your public folder. Study the html files and lets get to business. We will go for the top dock menu. For that we will need the css-dock-top.html. Copy the content of the file and paste it in the layout. You will need to change the paths to absolute path. To do that add the baseUrl in your application.ini :

resources.frontController.baseUrl = "http://localhost/php/learning_zend_nav/public"
And in the layout use
<?php echo $this->baseUrl();?>
to get the absolute path. The current layout.phtml we get is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="<?php echo $this->baseUrl();?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl();?>/js/interface.js"></script>
<link href="<?php echo $this->baseUrl();?>/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dock" id="dock">
   <div class="dock-container">
   <a class="dock-item" href="#"><img src="<?php echo $this->baseUrl();?>/images/home.png" alt="home" /><span>Home</span></a> 
   <a class="dock-item" href="#"><img src="<?php echo $this->baseUrl();?>/images/email.png" alt="contact" /><span>Contact</span></a> 
   <a class="dock-item" href="#"><img src="<?php echo $this->baseUrl();?>/images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
   <a class="dock-item" href="#"><img src="<?php echo $this->baseUrl();?>/images/music.png" alt="music" /><span>Music</span></a> 
   <a class="dock-item" href="#"><img src="<?php echo $this->baseUrl();?>/images/video.png" alt="video" /><span>Video</span></a> 
   <a class="dock-item" href="#"><img src="<?php echo $this->baseUrl();?>/images/history.png" alt="history" /><span>History</span></a> 
   <a class="dock-item" href="#"><img src="<?php echo $this->baseUrl();?>/images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
   <a class="dock-item" href="#"><img src="<?php echo $this->baseUrl();?>/images/rss.png" alt="rss" /><span>RSS</span></a> 
 </div>
</div>
<script type="text/javascript"> 
 $(document).ready(
  function()
  {
   $('#dock').Fisheye(
    {
     maxWidth: 50,
     items: 'a',
     itemsText: 'span',
     container: '.dock-container',
     itemWidth: 40,
     proximity: 90,
     halign : 'center'
    }
   )
  }
 );
</script>
</body>
</html>
it just shows the un-customized menu in all the pages. Now lets customize this for ourselves.

Customize...


We have four menu-heads, we will use the icons for Home and Portfolio but for the other menu-heads get the related images from somewhere like - http://www.iconfinder.com.

We are representing each menu with an image, now how to get the image information from the navigation.xml. Well, we can put in our custom fields in the page entity directly and access it from the view. Lets go ahead and change our xml.
<?xml version="1.0" encoding="UTF-8"?>
<configdata>
    <nav>
     <home>
         <label>Home</label>
         <controller>index</controller>
   <action>index</action>
   <image>home.png</image>
         <pages>
             <aboutus>
                 <label>About Us</label>
                 <controller>index</controller>
                 <action>aboutus</action>
                 <image>information.png</image>
             </aboutus>
             <portfolio>
                 <label>Portfolio</label>
                 <controller>index</controller>
                 <action>portfolio</action>
                 <image>portfolio.png</image>
             </portfolio>
             <services>
              <label>Services</label>
                 <controller>index</controller>
                 <action>services</action>
                 <image>services.png</image>
             </services>            
         </pages>
     </home>
    </nav>
</configdata>
You can see we have added a image attribute to each of the menu items. But we need to override the menu rendering of Zend_Navigation and make it to display a different format using the image attribute. For that Zend provides us with something called the View Partials. We will create our own partial menu template, set it in the Zend_Navigation menu object and ask Zend to render it.

Creating the Partial Menu Template...


Create a _menu.phtml under the layout/scripts folder (the folder in which we have the layout.phtml itself). Copy and paste the following :
<?php 
 $menu_dir = $this->baseUrl().'/images/';
?>
<div class="dock" id="dock">
   <div class="dock-container">
<?php  
   foreach ($this->container as $menu) {
?>
  <a class="dock-item" href="#"><img src="<?php echo $menu_dir.$menu->image;?>" alt="<?php echo $menu->label;?>" /><span><?php echo $menu->label;?></span></a> 
<?php 
  foreach ($menu as $menu) {
?>
  <a class="dock-item" href="#"><img src="<?php echo $menu_dir.$menu->image;?>" alt="<?php echo $menu->label;?>" /><span><?php echo $menu->label;?></span></a> 
<?php 
  }
?>  
<?php }?>
 </div>
</div>
<script type="text/javascript"> 
 $(document).ready(
  function()
  {
   $('#dock').Fisheye(
    {
     maxWidth: 50,
     items: 'a',
     itemsText: 'span',
     container: '.dock-container',
     itemWidth: 40,
     proximity: 90,
     halign : 'center'
    }
   )
  }
 );
</script>
Let us see what exactly we did here. We got the navigation container and iterated into the menus/submenus and displayed them the way we want. Note that we accessed the image attribute of the menu items by a simple - $menu->image. We can similarly use any custom attribute for our menu display - like a description attribute for bubble help.

To render the menu using the partial - we simply set it in the layout, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Learning Zend_Navigation - Part 2</title>
<script type="text/javascript" src="<?php echo $this->baseUrl();?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl();?>/js/interface.js"></script>
<link href="<?php echo $this->baseUrl();?>/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php 
 $this->navigation()->menu()->setPartial('_menu.phtml');
 echo $this->navigation()->menu()->render();
?>
</body>
</html>
Now we have our customized menu using Zend_Navigation up and ready. Lets see how it looks...

 photo out_4_zps82c39ef1.gif

No comments: