1. Overview
2. Does It Animate?
3. Quick Installation
4. Usage
5. Note
6. Resources

Overview ¶

This extension is a wrapper for the jpanelmenu jQuery plugin.

jPanelMenu v1.3.0 is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

Does It Animate? ¶

Of course! (If you want it to, there’s an option for that.)

Quick Installation ¶

1. Download jBalpanelmenu
2. Extract to protected/extensions

Usage ¶

In your protected/views/layouts/main.php,

<?php
// RECOMMENDED before echo $content
$this->widget( 'ext.jBalpanelmenu.jBalpanelmenu', array(
    'id' => 'jpanelmenu',
    'content' => $this->renderPartial( '//layouts/jpanelmenu', array(), TRUE ),
    'options' => array(
        'direction'           => 'left',
        'openPosition'        => '22%',
        'duration'            => 500,
        'keyboardShortcuts'   => array(
            array( // escape key
                   'code'  => 27,
                   'open'  => FALSE,
                   'close' => TRUE,
            ),
            array( // left arrow key
                   'code'  => 37,
                   'open'  => TRUE,
                   'close' => FALSE,
            ),
            array( // right arrow key
                   'code'  => 39,
                   'open'  => FALSE,
                   'close' => TRUE,
            )
        ),
        // Other options: http://jpanelmenu.com/#options
    ),
) );
?>

• Create new jpanelmenu.php file under protected/views/layouts/
• jpanelmenu.php will serve as your jpanelmenu content.
• You can put some widgets there or code your html.

You can try putting CMenu widget in jpanelmenu.php like this...

<?php
$this->widget('zii.widgets.CMenu', array(
    'items'=>array(
        array('label'=>'Home', 'url'=>'#'),
        array('label'=>'Products', 'url'=>'#'),
        array('label'=>'New Arrivals', 'url'=>'#'),
        array('label'=>'Most Popular', 'url'=>'#'),
        array('label'=>'Login', 'url'=>'#'),
        array('label'=>'Home', 'url'=>'#'),
        array('label'=>'Products', 'url'=>'#'),
        array('label'=>'New Arrivals', 'url'=>'#'),
        array('label'=>'Most Popular', 'url'=>'#'),
        array('label'=>'Login', 'url'=>'#'),
    ),
));
?>

Note ¶

• As stated in jpanelmenu.com, >There are no default graphical styles injected into your page by jPanelMenu, because, as a developer who loves complete control over my pages, there is nothing I dislike more than plugins which do that. Therefore, all graphical styling is up to you, and jPanelMenu makes it very easy.
• It is VERY important to put the jBalpanelmenu widget in protected/views/layouts/main.php or wherever your main layout file is, to avoid problems with jpanelmenu. Some problems can be encountered will be multiple jpanemenu panel.

Resources ¶

• Found a bug or want a feature? Report it on bitbucket.org
• Code on bitbucket
• E-Mail the author: JbalTero of Codeitat Software<jbaltero@gmail.com>
• JPanelMenu/Demo