mbmenu

MbMenu dorpdown menu
37 followers

MbMenu is an extension to CMenu wich provides you a nice dropdown menu.

Resources

Documentation

Requirements

  • Yii 1.0 or above
  • Tested on IE6/IE7/IE8/Firefox/Chrome

Installation

  • Extract the 'mbmenu' folder under protected/extensions

Usage

The usage of this extension is allmost the same like CMenu.

The following example shows how to use MbMenu:

<?php $this->widget('application.extensions.mbmenu.MbMenu',array(
            'items'=>array(
                array('label'=>'Home', 'url'=>array('/site/index')),
                array('label'=>'Contact', 'url'=>array('/site/contact'),
                  'items'=>array(
                    array('label'=>'sub 1 contact'),
                    array('label'=>'sub 2 contact'),
                  ),
                ),
                array('label'=>'Test',
                  'items'=>array(
                    array('label'=>'Sub 1', 'url'=>array('/site/page','view'=>'sub1')),
                    array('label'=>'Sub 2',
                      'items'=>array(
                        array('label'=>'Sub sub 1', 'url'=>array('/site/page','view'=>'subsub1')),
                        array('label'=>'Sub sub 2', 'url'=>array('/site/page','view'=>'subsub2')),
                      ),
                    ),
                  ),
                ),
            ),
    )); ?>

Change Log

January 23, 2012

  • v1.3 fix mentioned by Zyphers in function normalizeItems

February 23, 2010

  • v1.2 fix for IE7

February 22, 2010

  • v1.1 minor update in creation of class styles

February 18, 2010

  • Initial release.

Total 20 comments

#6598 report it
zyphers at 2012/01/20 04:18am
hideEmptyItems property doesn't work

As CMenu's hideEmptyItems property is a bug according to issue 3029. And it's already fix in Yii's 1.1.9 as MbMenu bases on CMenu and has override a function normalizeItems so it should be fixed too.

#6052 report it
Alexandre_ti at 2011/12/08 05:40am
Very nice extension

It's useful for me. Great job!

#5998 report it
javedkhan at 2011/12/04 06:37am
Ajax links

How can we use Ajax links.

#5950 report it
fixticks at 2011/11/28 01:14pm
Important instructions, thanks nafa

Why isnt this part of the installation instructions. change div id = "mainmenu"> to.. div id = "mainMbMenu">

in protected/views/layouts/main.php

#5655 report it
StarSight at 2011/10/28 10:04pm
Can not change Styles (cont)

I have now cleared the Assets folder in the root directory (was not previously familiar with it), and I still can not edit the styles. Changes made to the mbmenu.css file in the /protected/extensions/mbmenu/source folder do not edit the menu. I assume the menu would use the mbmenu.css for formating, but I can delete the file with no effect to the menu styling. The current styling of the menu is the same as the example at http://yii.heyhoo.com/mbmenu/. What else could I check? Thanks for your help.

#5645 report it
heyhoo at 2011/10/28 05:33am
CSS Styles

@starsight: did you clear the assets folder?

#5638 report it
StarSight at 2011/10/27 10:00pm
Can not change Styles

Have tried to edit the mbmenu.css file in the extensions/mbmenu/source folder but there were no changes. What could be wrong?

#4666 report it
GTeKi at 2011/08/01 10:54pm
siskalandre

Hi, I modified your function. The only thing I did was add the directory containing the icons in the extension. In my opinion this better ordered.

if (isset($item['image'])) {
 $item['image'] = $ this->baseUrl. '/icons/'. $item['image'] //add this line
 $imghtml = chtml::image($item['image'], $item['label']);

and within the source directory, I created a directory called icons.

Finally in the menu instead of calling "image" with the path, I indicate only the name of the image.

certainly, this isn't the best choice but works for me.

#4451 report it
siskalandre at 2011/07/10 06:55am
just shared: extend with image

I had extend your mbmenu extensions with icon and text

Mbmenu.php

protected function renderMenuRecursive($items)
      {
          foreach($items as $item)
          {
            echo CHtml::openTag('li', isset($item['itemOptions']) ? $item['itemOptions'] : array());
            if(isset($item['url']))
            {
              if(isset($item['image'])) {
                $imghtml=CHtml::image($item['image'], $item['label']);
                echo CHtml::link('<span>'.$imghtml.' '.$item['label'].'</span>',$item['url'],isset($item['linkOptions']) ? $item['linkOptions'] : array());
              } else
                echo CHtml::link('<span>'.$item['label'].'</span>',$item['url'],isset($item['linkOptions']) ? $item['linkOptions'] : array());
            }
            else
                echo CHtml::link('<span>'.$item['label'].'</span>',"javascript:void(0);",isset($item['linkOptions']) ? $item['linkOptions'] : array());
            if(isset($item['items']) && count($item['items']))
            {
                echo "\n".CHtml::openTag('ul',$this->submenuHtmlOptions)."\n";
                $this->renderMenuRecursive($item['items']);
                echo CHtml::closeTag('ul')."\n";
            }
            echo CHtml::closeTag('li')."\n";
          }
      }

and how to use

array('label'=>'Home', 'url'=>array('/site/index'),
                      'image'=>Yii::app()->request->baseUrl.'/images/home.png'),
#4135 report it
artur_oliveira at 2011/06/08 09:55pm
IE <8 problem solved if theming

To theme this fine menu extension all you need to do is define 'cssFile'=>'/some/url/to/file.css' and copy the images to the same directory.

This is good cause this way you can customize the images too without changing the original extension code

However with the existing code there is a small problem:

  • The file mbmenu_iestyles.css is not loaded

To solve this you have to change the extension file protected/extensions/mbmenu/MbMenu.php from:

public function registerCssFile($url=null)
      {
        // add the css
        if ($this->baseUrl === '')
            throw new CException(Yii::t('MbMenu', 'baseUrl must be set. This is done automatically by calling publishAssets()'));
 
          $cs=Yii::app()->getClientScript();
          if($url===null) { 
              $url=$this->baseUrl.'/mbmenu.css';
          $cs->registerCssFile($url,'screen');
          $browser = Browser::detect();
          if ($browser['name'] == 'msie' && $browser['version'] < 8)
            $cs->registerCssFile($this->baseUrl.'/mbmenu_iestyles.css','screen');
        } else {
            $cs->registerCssFile($url,'screen');
        }
      }

To:

public function registerCssFile($url=null)
      {
        // add the css
        if ($this->baseUrl === '')
            throw new CException(Yii::t('MbMenu', 'baseUrl must be set. This is done automatically by calling publishAssets()'));
          $cs=Yii::app()->getClientScript();
          if($url===null) 
              $url=$this->baseUrl.'/mbmenu.css';
          $cs->registerCssFile($url,'screen');
          $browser = Browser::detect();
          if ($browser['name'] == 'msie' && $browser['version'] < 8)
            $cs->registerCssFile($this->baseUrl.'/mbmenu_iestyles.css','screen');
      }

Everything works ok.

  • The assets folder is created

  • The file mbmenu.css and the images are loaded from the alternate directory /some/url/to/

  • The file mbmenu_iestyles.css is loaded from the original assets directory

This is only a problem if you use IE < 8 whichif you want a really cross browser webapplication is important

Hope this helps.

Good coding!!!

#3734 report it
nafa at 2011/05/03 02:38am
yipee

This extension works well with me.. The most important things, make sure that you modify the

<

div id = "mainmenu"> to..

<

div id = "mainMbMenu">

#3701 report it
Draga at 2011/04/29 04:52am
??

nevermind, I've added another dropdown and it's working now...??

#3700 report it
Draga at 2011/04/29 04:40am
problem

Very nice extension, it was what I was looking for but... how come in IE9 parent li doesent have any ul inside, so no dropdown?

#2930 report it
bfg at 2011/02/26 06:48am
Questions

I'm loving the menu, but not sure how to go about making it themeable? Is it possible?

Also, is there any way of not having to change the menu structure in each theme layout and just do it in one place?

Thanks.

#2852 report it
bonnie at 2011/02/16 10:46am
Finally

I tried many different menus but this one has finally rescued me. Thanks A lot.

#2020 report it
trejder at 2010/11/02 05:28am
Some bugs with more deeper menu structure

It is worth to note that MBMenu has some problems (menu drawing and handling bugs) when one is using menu with more than two sub levels. See this forum post for more information.

#154 report it
saiful at 2010/08/26 01:23am
Suggestion

since yii using blueprint css.. and maybe not much people use custom css.. please add:


$htmlOptions['class']='clear';
it will ensure this menu goes into new line. and i can't set it via htmlOptions. (htmlOptions will only set menu items)
#446 report it
pappleton at 2010/05/31 08:56am
Great extension - but avoid the conflict

As long as you rename the menu id in main.php layout

id="mainmenu" becomes something like id="mainMbMenu"

to avoid the css conflict as mentioned by igorsantos07.

Exactly what I wanted and it seems to be very compatible with the standard CMenu

#452 report it
igorsantos07 at 2010/05/29 02:57pm
Note for working out of the box

Great menu! But a note for ppl that want it to "just work": the original Yii CSS conflicts with this menu. You should remove entries for #mainmenu from css/main.css or rename the ID in your layout for something, like, 'id="menu"' instead of 'id="mainmenu"'.

#825 report it
heyhoo at 2010/02/23 03:44pm
IE6

@Raoul: it now also works under IE6. Please download the latest release.

Leave a comment

Please to leave your comment.

Create extension