Yii 1.1: cdropdownmenu

CDropDownMenu is a extension to CMenu that allows Drop-Downs via superfish

CDropDownMenu is a extension to CMenu that allows Drop-Downs via the superfish jquery plugin.



  • Yii


  • Extract the release file under protected/extensions


See the following code example:

            'style' => 'vertical', // or default or navbar
                    'items' => array(
                            'label'=>Yii::t('Browse demos'),
                            'label'=>Yii::t('Create new Demo'),
                            'url'=>array('//demo/index', 'owner' => true),
                array('label'=>'Logout ('.Yii::app()->user->name.')',

Attention: please be sure to not use this Widget inside the div id="mainmenu" of standard-generated webapps because there seems to be some css inconsistency between yii's default css and superfish's default css.

Also be sure to read the API Documentation of CMenu to fully understand how this Menu works.

Options passed to superfish need to be inserted into the js/superfish.js file.

Change Log

June 2, 2011

  • added style = 'navbar' and style = 'vertical'
  • Codecleanup

January 25, 2010

  • Version 0.2 released
  • possible to pass 'cssFile' option
  • bugfix: added div clear:both after menu
  • possibility to move extension anywhere in file system path
  • added shadow.png and arrows.png from default
  • made the default css-file a lot more beautiful

January 20, 2010

  • Initial release.

Total 17 comments

#19347 report it
Gerhard Liebenberg at 2015/05/28 05:03am
Css images path error

In my assets folders, the 'images' folder is not inside the 'css' folder.

So this code in superfish.css does not find the required file:

background: url('images/arrows-ffffff.png') no-repeat -10px -100px;

Change it to:

background: url('../images/arrows-ffffff.png') no-repeat -10px -100px;

Do the same for:

background: url('../images/shadow.png') no-repeat -10px -100px;
#13073 report it
Shahcheraghean at 2013/05/02 05:36am
Demo and git

Is there any Demo and git repository?

#5375 report it
puritania at 2011/10/08 02:48am


public $options;
public $activeCssClass = 'current';

Move files: directory /js, /images/, /js into subfolder /assets/*

Delete file: /assets/js/CDropDownMenu.js

Relace #1:

//$basePath = Yii::getPathOfAlias('ext.CDropDownMenu');
//$baseUrl = Yii::app()->getAssetManager()->publish($basePath);
$dir = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets';
$baseUrl = Yii::app()->getAssetManager()->publish($dir);

Replace #2:

//$cs->registerScriptFile($baseUrl . '/js/' . 'CDropDownMenu.js',$this->position);
$cs->registerScript('superfish', '$("ul.sf-menu").superfish('.CJavaScript::encode($this->options).'); ',$this->position);


protected function renderMenuItem($item)
    $options=isset($item['linkOptions']) ? $item['linkOptions'] : array();
    $class = array();
    if($item['active'] && $this->activeCssClass!='')
            $options['class']=implode(' ',$class);
            $options['class'].=' '.implode(' ',$class);
    $item['linkOptions'] = $options;
    return parent::renderMenuItem($item);
#4798 report it
klod at 2011/08/17 01:39pm

Suggestion for next release for configuring superfish options:

comment this first line and add the second

//$cs->registerScriptFile($baseUrl . '/js/' . 'CDropDownMenu.js',$this->position);

add this public var:

public $options;

and finally this function

protected function getJs(){
        $js_options = CJavaScript::encode($this->options);
    return <<<EOF
$(document).ready(function() { 
#4797 report it
klod at 2011/08/17 11:28am

It will take effect if you delete content of assets folder.

#4008 report it
abhimir at 2011/05/27 01:30am
changing the background color

How do I change the lightgray background color of the menu? Changing the color in superfish.css has no effect.

#3046 report it
stutteringp0et at 2011/03/09 11:43pm

Well, it needs fine-tuning to make it look good...but functionally beautiful.

Thanks for keeping it so clean!

#2022 report it
Trejder at 2010/11/02 07:21am
Problems with using this extension

Unfortunatelly, this extension does not work as supposed!

Extension author assumed that it's files (CDropDownMenu.php file and vendors folder) will be put directly in extensions folder, not in own subfolder which introduces mess inside. Attempts to use subfolder makes extension to not work at all, because paths inside it (especially to vendors folder, which should be published via assetsManager) are hardcoded -> very bad developer attitiude! One must do manual extension code rewrite to be able to put it in subfolder of extensions folder. Please not that Yii definitive guide strongly advises to use subfolder per each extension being used in page!

Even if ones decides to use extension directly in extensions folder, it works, but looks ugly! Seems like CSS styling does not work. Double checked that superfish.css is properly published and linked to page and that menu structure does not collide with original div id="mainmenu", but with no results.

Overall note: Idea of use superfish.js is great but one need to search for another Yii extensions or write own to use it inside Yii app as this one requires to much work to made it working.

#249 report it
lichunter at 2010/07/27 06:55pm
How can I center in my page a CDropDownMenu?

How can I center in my page a CDropDownMenu?

#442 report it
tri at 2010/06/01 01:04pm
Ability to set superfish options

Perhaps replace CDropDownMenu.js with PHP code:

//Yii::app()->clientScript->registerScriptFile($baseUrl . '/' . 'CDropDownMenu.js',CClientScript::POS_HEAD);
$sfOptions = '{delay:300,speed:"fast"}';
Yii::app()->clientScript->registerScript('sf-menu', '$("ul.sf-menu").superfish('.$sfOptions.');', CClientScript::POS_READY);
#724 report it
sp1D3R at 2010/03/11 06:13am
Hope for a new release...

Yep, would be great to have a workin superfish plugin... this way is quite not usable...

#828 report it
thyseus at 2010/02/22 04:40pm
Thank you

this bugfix and some more default styles will be released in the next version soon

#848 report it
outrage at 2010/02/19 12:36am
Missing Closing Div

Hi and thanks for your contribution.

I just wanted to report that your code appears to have a missing closing div element.


echo '<div style="clear:both;">';

The last line should read:

echo '<div style="clear:both;"></div>';

Kind regards.

#885 report it
jeremy at 2010/02/12 01:39pm

the use of hoverIntent.js is a big improvement over any other javascript menus.

Thanks for creating this in Yii!

#953 report it
thyseus at 2010/01/21 08:07am
thanks for Your Contributions

@ got2doodle: yes, of course. Any Contribution is wanted !

@ jonah: already fixed this in the new Version i am releasing soon (among other additions...)

#955 report it
jonah at 2010/01/20 05:25pm

I would only recommend this change on line 47 of CDropDownMenu: $basePath=dirname(FILE).DIRECTORY_SEPARATOR.'vendors';

This way the vendor folder can be located in the same directory as the extension no matter where the extension is located

#956 report it
got 2 doodle at 2010/01/20 02:01pm
Nice extension

I modified CDropDownMenu.php so that I could pass the name of the css file that I want to use. Let me know if you want the modified code.


Leave a comment

Please to leave your comment.

Create extension