Search:     Advanced search

Customizing the position of Menu Group and it design layout.

Article ID: 93
Last updated: 11 Sep, 2011
Revision: 11
Email to friend
Add comment
Views: 0
Comments: 0

Before customizing the Menu group and it’s design, please make sure you have read the what is menu group and how to create menu group in details. Assuming that, you are familiar with the concept of menu group.

Create a Menu Group from Admin:

For better understanding, let's say we are going to create a new Menu Group called "Right Hand Vertical Menu bar" and customized its design layout and position to the right hand part of the page. To create new Menu Group log on to ADMIN => Menu => Create New Menu Group which will take you to the following page. Type a new menu group name and save it.

Unique Menu Group ID :

As soon as you create a new "Menu Group", look at the unique ID which generates automatically to represent the respective "Menu Group" in number format. See the image pointing the unique menu group ID as follows :

Once you have created a new menu group, now we have to create a custom partial block for your new menu block. A block is a dynamic data model. The purpose of a block is to replace the static view model of MVC application by using a model that can be updated at run time—that is, by using a dynamic block.

View existing Menu Group blocks using Zend Partials :

The applications is designed using the combination of various design blocks (blocks are a dynamic data models that use block templates to make the data visible to the user in the way you want), you can find the Menu group Blocks templates at $ServerPath/application/layouts/scripts/$YourTemplate/blocks/ are fragments of markup for rendering shapes.  

According the to above image, the open a "RED" marked blocks to view the code how it brings menu data and decorate (using custom css/js/jquery) itself. Similarly open "BLUE" marked blocks to view the code how it brings sub-menu data and decorate (using custom css/js/jquery) itself.

A Partial based Design Block is a reusable template that is rendered by a special type of helper — in its most basic case, the partial helper class. When using a partial, you explicitly bind variables to a local scope that only work within the context of the template you define. It’s a little bit like a baby helper, in that it has no access to the global view, and therefore can only operate on the variables provided to it as well as information it can pull out of places like Zend_Registry. What’s nice about that is that if you need to define a handful of variables only to be used in the context of a repeatable template, you can rope them off to their own file and not worry about making your code harder to read or affecting any data outside of this specific context.

Steps to create Custom Menu Group :

If you have gone over to our existing Menu Group blocks design samples (outlined in above image), you would understand how to change the code in order to create a customized your Menu Group. Let me outline some key functions to help you customizing the menu group.

Use of Database and Word Limit  : 

function __construct($view) and function truncate (); Contractor is used to contract the view object loading relevant information with the instance of re-usable object. $this->_DBconn->getConnection() is to facilitate Database Connection for you to run DB related quires according to your demand. Furthermore you can customize the truncate () function to limit words as you wish.

Adding Unique Menu ID : 

protected $_group = 3;     change the value of $_group variable according to your newly created "Menu group" shown in second image above.    

Playing with Sub-Menus  : 

subMenu($menu_id,$menu_class,$view,$menu_select_id) You can customize the subMenu() function if the application deals with sub-menus to be shown. 

Decorating Body of Menu-Group : 

function class_body() You can customized the "class_body()" function in order to apply custom CSS or JS effect on upcoming menu group. Here is some example as follows : 

echo $this->_view->headScript()->setFile('application/layouts/scripts/'.$this->_front_template['theme_folder'].'/js/superfish.js'); 

echo $this->_view->headLink()->setStylesheet('application/layouts/scripts/'.$this->_front_template['theme_folder'].'/css/superfish.css');

This article was:  
Also read
document Joining contents with a Menu to create navigation link.
document How to link a Menu with a Content or Extension page ?
document About Menu Group.
document Menu Group - For building easy Website navigation
document How to create a new Link to content or menu by coping a existing hyperlink.
document How to Create new Menu Group.

Also listed in
folder Modules Wise Documentation -> Manage Articles / Content (CMS)
folder Site Building Guide
folder Templates Customization
folder Developer Documentation
folder Modules Wise Documentation -> Menu Management

Prev   Next
How to Create new Menu Group.     Creating a Menu with Static external link by copying another...