Cmenu with seporator

Yii 1.1 General Discussion
1

Hello.

Is it possible to create Cmenu with native line(or empty space, or image) separator(vertical/horizontal)?

something more atractive than

array_push($menu,array(‘label’=>’-----------’,‘url’=>’’,‘visible’=>true));

or

array_push($menu,array(‘label’=>’|’,‘url’=>’’,‘visible’=>true));

Ty, in advance.

2

If you are looking for improving CMenu default layout, check some resources for inspiration:

http://www.yiiframework.com/wiki/93/using-the-jqueryslidemenu-plugin-with-cmenu/

regards!

3

Thank you for quick response, i understand that menu with separator is not possible without plug-in?

I will try that, but can you supply a short example with separator in it? using that plug-in or not.

a mean menu like

( [item][item][item] | [seporated_item] )

or

  [item]


  [item]


  [item]


  ------

[seporated_item]

4

Just an idea… you can use the ‘template’ option of the next menu item to set a separator…

something like




...

array('label'=>'Home', 'url'=>array('/site/index')),

array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about'),'template'=>'| {menu}'),

...

This way you get a separator between "Home" and "About"

5

Yes it work, for now its fine, more like hack-a-round, enough for me.

Thank you.

P.S. there is no native separator in Cmenu at Yii, 1.1.5.

6

I don’t see this as a hack but as a creative use of the given options… B)

7

Well said…

Nevertheless, have you seen the way CMenu renders the menu items? You could easily create CSS that change the way it looks. In fact, I bet it displays this way because of that…

8

well said indeed…

but it still work-around, isn’t it?

now that i have done using template i have (beneath)a small about 3 pixel line that activating when hovering over it.

i hope this wont be found, when app will be cheeked by clients.

9

As I wrote before I don’t see this as a hack… you can think about this as a hack if you want to… but then why would be there the ‘template’ option if not to be used for like this… :)

The hover you see is something in CSS you will need to find what is the definition that is activating on hover to find out how to solve this…

10

Meaby create 2 styles one with hover and other are for separator, but how to use it separately in template ?

11

I tried this on a default new Yii app and there is no line on hover for the separator… so you should check your CSS…

12

And this is very strange, i use only standard css with some additions without modification.

And getting this:

array_push($this->menu,array(‘label’=>’’,‘url’=>’’,‘template’=>’{menu}’,‘visible’=>true,));

or

array_push($this->menu,array(‘label’=>’’,‘url’=>’’,‘template’=>’|{menu}’,‘visible’=>true,));

on screen

so my question is , how to change css class inside ‘template’=>’{menu}’, what is what here?

13

:)

what do you mean with "some additions without modification"

From the picture I don’t realy understand what you wanted to show… but if you think on the “|” line… that’s exactly the character you use in the template…

try to use:


'template'=>'-------------- {menu}'

NOTE: I tryed that with the horizontal menu (Home About Contact Login) and there the ‘|’ line fits perfectly…

14

You can use:




'template' => '<hr> {menu}'

to draw a horizontal line as a separator. Also you can apply some CSS and style it to fit your needs.

15

I have Yii 1.1.10 and template for menu items seems not to be working with me, here is a piece of code

array(‘url’=>Yii::app()->getModule(‘user’)->loginUrl, ‘label’=>Yii::app()->getModule(‘user’)->t(“Login”), ‘visible’=>Yii::app()->user->isGuest), array(‘url’=>Yii::app()->getModule(‘user’)->registrationUrl, ‘label’=>Yii::app()->getModule(‘user’)->t(“Register”), ‘visible’=>Yii::app()->user->isGuest, ‘template’=>’| {menu}’)

Am I doing something wrong ?

Thanks in advance.

16

I know this is an old thread but was looking for a similar answer for a stacked menu divider.

To apply a class to a list item you can set the itemOptions class and then use CSS to adjust the styling.


...

array(

   'label'=>false, 

   'itemOptions'=>array('class'=>'divider') 

),

...

Here’s the link to look at all of the available items properties in CMenu…

http://www.yiiframework.com/doc/api/1.1/CMenu#items-detail

Thanks for all the great answers.