mbmenu

Yii Framework Extensions

Createnew extension

Popular Tags

mbmenu MbMenu dropdown menu

Documentation
Change Log

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')),
				      ),
				    ),
				  ),
				),
			),
	)); ?>

Replace

<div id="mainmenu">

with

<div id="mainMbMenu">

to avoid conflicts with the standard CSS for the menu.

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.

74 1

66 followers

23 418 downloads

Yii Version: 1.1

License: BSD-2-Clause

Category: User Interface

Tags:

Developed by: heyhoo

Created on: Feb 19, 2010

Last updated: 11 years ago

Downloads

show all

User Contributed Notes 40

#154

0 0

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)

saiful at Aug 26, 2010, 5:23:57 AM

#446

1 0

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

pappleton at May 31, 2010, 12:56:08 PM

#452

2 0

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"'.

igorsantos07 at May 29, 2010, 6:57:48 PM

#825

0 0

IE6

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

heyhoo at Feb 23, 2010, 8:44:15 PM

#838

0 0

nice but...

very nice menu (but under IE6, it doesn't work)
Good work !

Raoul at Feb 20, 2010, 11:15:14 PM

#842

0 0

OK for my needs

nice extension, very easy to use.
Thank you!

grezac at Feb 20, 2010, 4:28:37 PM

#846

0 0

keyz

"i swear" i mean... (shame on me))

Mikhail Eremin at Feb 19, 2010, 10:22:57 AM

#847

0 0

AT LAST!!!!

I tried all menu extensions for Yii presenting here and i sware this one is the best!!!! No bugs, active item highlighing. I take it!))
Thanx a lot!

Mikhail Eremin at Feb 19, 2010, 10:20:53 AM

#2020

0 0

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.

Trejder at Nov 2, 2010, 9:28:52 AM

#2852

0 0

Finally

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

bonnie at Feb 16, 2011, 3:46:54 PM

#2930

0 0

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.

bfg at Feb 26, 2011, 11:48:52 AM

#3700

0 0

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?

Draga at Apr 29, 2011, 8:40:45 AM

#3701

0 0

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

Draga at Apr 29, 2011, 8:52:15 AM

#3734

2 0

yipee

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

to..

nafa at May 3, 2011, 6:38:41 AM

#4135

0 0

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!!!

Artur Oliveira at Jun 9, 2011, 1:55:09 AM

#4451

0 0

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'),

siskalandre at Jul 10, 2011, 10:55:02 AM

#4666

0 0

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.

TeKi at Aug 2, 2011, 2:54:38 AM

#5638

0 0

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?

StarSight at Oct 28, 2011, 2:00:33 AM

#5645

0 0

CSS Styles

@starsight: did you clear the assets folder?

heyhoo at Oct 28, 2011, 9:33:14 AM

#5655

0 0

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.

StarSight at Oct 29, 2011, 2:04:33 AM

#5950

0 0

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

Fixticks at Nov 28, 2011, 6:14:26 PM

#5998

0 0

Ajax links

How can we use Ajax links.

javed alam at Dec 4, 2011, 11:37:51 AM

#6052

0 0

Very nice extension

It's useful for me. Great job!

Alexandre Sena Coelho at Dec 8, 2011, 10:40:13 AM

#6598

0 0

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.

zyphers at Jan 20, 2012, 9:18:35 AM

#6938

0 0

Works out of the box

Great extension, thank you!

bilijen at Feb 14, 2012, 10:16:36 PM

#8208

0 0

Awesome!

Very nice extension! Awesome!

Solleon at May 17, 2012, 7:00:41 PM

#9366

0 0

Generate Model drop down

How can I make the drop down list automatically gather all my models, is it possible with this extension? So for example if I click on one of my Menu items "Products" I want all the products model to show on the drop dow.

Thanks

ItsYii at Aug 7, 2012, 9:35:50 AM

#10185

0 0

Customize MBMenu CSS

I'm having trouble to change the style. How can I do it?

brunocalado at Oct 9, 2012, 2:51:12 PM

#11027

0 0

how to change menu background color

seriously i can't change or modify the menu style, event all asset in protected\extensions\mbmenu\source i deleted it still not effect.

mr.shadoww at Dec 11, 2012, 8:53:40 AM

#11028

1 0

@mr.shadoww

i had use this extension much time before.
and as i know menu background is generated by image(s),
so to change background color you had to replace that image(s).
you can found that images and their path by inspect element.

kiran sharma at Dec 11, 2012, 9:00:19 AM

#11043

0 0

still

@kiran sharma at protected\extensions\mbmenu\source folder..i change the nav1_active1.gif file, it suppose to be change the color of the menu, but it don't, and you know what? even all file at protected\extensions\mbmenu\source folder i deleted and let the ..\source folder empty it's still give me the same menu layout...:( have you try to vanished file in the ..\source folder??

mr.shadoww at Dec 12, 2012, 8:46:59 AM

#11044

1 0

@mr.shadoww

try after removing assets files under projectFolder/assets/*

kiran sharma at Dec 12, 2012, 8:52:42 AM

#11871

0 0

Active/Current selected Image

Hi I'm trying to have a different image depending on the page I'm on (like an active or current link). Here is my code.

array('label'=>'<img src="'.Yii::app()->request->baseUrl.'/images/products.gif" />', 'url'=>array('/category/index'),
                  'items'=>$items, 'active'=>'<img src="'.Yii::app()->request->baseUrl.'/images/products-on.gif" />'
                ),

'active'=> This doesn't have any effect.

Also is there a hover feature for images too

Thanks

ItsYii at Feb 10, 2013, 9:44:42 AM

#13911

0 0

Yii standard CSS

Does anyone modified mbmenu CSS to fit the style that comes with yii? IMHO there is clash of colors between mbmenu orange an yellow clash and yii blue gradients.

kradam at Jul 5, 2013, 12:02:37 PM

#15828

0 0

visible is not working

visible is not working with the links that have children
what i do?

noorr_swati at Dec 20, 2013, 12:53:07 PM

#16108

0 0

The first menu I used!

Great extension and easy to learn, I remember the days when I am only guessing.

jcagentzero at Jan 21, 2014, 6:11:48 AM

#16559

0 0

CSS & Color changes

@kiran & @Kradam:

COLORS:
In order to change the colors you must modify source/nav1_bg.gif and source/nav1_active.gif which provide the background and active selection colors. You can actually make this look nicer if you switch them to clean png files with gradients or some some such instead of the gif. If you do this you need to update the mbmenu.css file - just to a find/replace, no other edits are needed.

Activating the CSS: In order make the mbmenu.css active and not conflict with the default Yii css (blueprint), you need to update main.php as:

From:
	<div id="mainmenu">
		<?php $this->widget('zii.widgets.CMenu',array(
To:
	<div id="mainMbMenu">
		<?php $this->widget('application.extensions.mbmenu.MbMenu',array(

Jim K at Mar 5, 2014, 9:13:16 PM

#18087

0 0

updating css for mobile theme

For my mobile theme on my app, space is at a premium. I'd like to remove the empty padding space on the left side of the menu bar but I'm not quite sure what to change in the css. Any help?

I think it could be on the first line of the mbmenu.css: " padding:0 30px; "

Does this add a 30px padding around all the menu labels?

Jim

Jim K at Sep 5, 2014, 8:11:01 PM

#19293

0 0

Nice extension.

I am using Yii for the first time.
I am having a dozens of menus in the menu bar and was stuck with how to keep them in navigation strip.
This extension has solved my problem with its easy to understand parent-child relationship of menu items.

Good job, good documentation, simplicity to use.

PHP Senior Developer at May 13, 2015, 5:35:50 AM

#19530

0 0

class="Active"

Hi, i have this situation:
I build my MBMenu dynamically, creating links like that:

array('/site/Whatever-I-want')

In the SiteController then I catch this actions "Whatever-I-want" with missingAction($actionId), and later on do some work and display some data!

I noticed that only menu items, that have a NOT missingAction defined (for the action) show "Active" classes for the menu root items.

Can this somehow be fixed??
Regards Luka

Lux69 at Aug 25, 2015, 7:50:54 AM

Categories