jbalpanelmenu Wrapper for JPanelMenu

  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).

Overview

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

3 0
6 followers
415 downloads
Yii Version: 1.1
License: GPL-3.0
Category: User Interface
Developed by: JbalTero
Created on: May 13, 2014
Last updated: 3 years ago

Downloads

show all

Related Extensions