[Solved] Two row horizontal menu

Hello,

still try to find the ‘best’ solution for my menu.

I want to have a two row horizontal menu with a third level as a vertical pull down menu.

I want to use only CMenu, not an extensions like MbMenu.

To bring it in the ‘right direction’ like horizontal or vertical and so on, I will use CSS, that’s not a problem. I always did it in classic php apps.

My “classic php” solutions looks like:

  • Menu_Item_1

  • Menu_Item_2

  • Menu_Item_3

And if the selected Item is ‘Menu_Item_2’ I add the following.

- Sub_Menu_Item_1
  • Sub_Menu_Item_2

  • Sub_Menu_Item_3

The Output is:

Menu_Item_1 Menu_Item_2 Menu_Item_3

Sub_Menu_Item_1 Sub_Menu_Item_2 Sub_Menu_Item_3

and is formatted via CSS. => ok

So, when I use yii’ CMenu I do the following:

$this->widget(‘zii.widgets.CMenu’,array(

      	'items'=>array(





                         		array(…Menu_Item_1..)





                         		array(…Menu_Item_2., items Sub_Menu_Item_1, Sub_Menu_Item_3, Sub_Menu_Item_3) // Sub_Menus





                          		array(…Menu_Item_3..)

so I get instead of the described ‘classic php’ solution the following:

Menu_Item_1 Menu_Item_2

Sub_Menu_Item_1 Sub_Menu_Item_2 Sub_Menu_Item_3

Menu_Item_3

That is a difference and not simple to solve with CSS (in my opinion)

I could solve it by calling the widget twice:

$this->widget(‘zii.widgets.CMenu’,array(

      	'items'=>array(





                         		array(…Menu_Item_1..)





                         		array(…Menu_Item_2. ..)





                          		array(…Menu_Item_3..)

$this->widget(‘zii.widgets.CMenu’,array(

      	'items'=>array(





                         		array(…Sub_Menu_Item_1..)





                         		array(…Sub_Menu_Item_2. .)





                          		array(…Sub_Menu_Item_3..)

That brings me the right structure:

Menu_Item_1 Menu_Item_2 Menu_Item_3

Sub_Menu_Item_1 Sub_Menu_Item_2 Sub_Menu_Item_3

Is this solution ok? Or is there another idea to solve it ?

I have more (specific) questions, depends on the solution :rolleyes::rolleyes:

Ok,

here you will find my solution.

I give you an easy to test example, then feel free to change it.

  1. Generate a yii application

  2. Keep the standard menu.

  3. Navigate to the CMenu Class Reference

    http://www.yiiframew.../api/1.1/CMenu/

  4. Copy the CMenu Example.

  5. Paste it AFTER the </div> tag of the standard menu.

  6. Add the html statement

    <ul class="navigation">

BEFORE the pasted menu

  1. Add the html statement

    </ul>

AFTER the menu

  1. Add the following CSS code in main.css

.navigation {

padding: 0px;


margin: 0px;


list-style-type:none;


text-align: left;	

}

.navigation ul {

padding:0px;


margin: 3px 0px 0px 0px;	

}

.navigation ul a {

margin: 0px 4px 0px 0px;


background-color: blue;


text-decoration:none;


list-style-type:none;


color: white;

}

.navigation ul a:hover{

background-color: red;

}

.navigation ul li {

float: left;


text-decoration:none;


list-style-type:none;

}

.navigation ul li a {

float: none;


text-decoration:none;


list-style-type:none;


padding: 5px;

}

.navigation ul ul li {

float: none;


width: 150px;

}

.navigation ul ul li a {

background-color: blue;


border-top: 1px solid yellow;


width: 150px;

}

.navigation ul ul li:hover {

background-color: red;	

}

ul.navigation a {

display: block;

}

ul.navigation li ul {

display: none;


position: absolute;


margin: 0px 0px 0px 0px;

}

ul.navigation li:hover ul {

display: block;


z-index: 10;	

}

  1. Have fun ::)

Nice!

Do you have a screen shot? :)

Yes.

But it need less then 2 minutes on your own system.

Thank you very much for your sharing Scryii, now I can use CMenu with sub-items as I wanted… :)

Hi, because i’m not an expert in CSS.

I try to make this submenu example that look like the original menu (colors, and fonts)

If some one need it I make also this changes:

  1. in main.php comment div with id "mainmenu#

  2. modify main.css to adjust lines that scryii posted:

this is my lines:


/* --- */

.navigation {

	background:white url(bg.gif) repeat-x left top;

	/*padding: 0px;*/

	padding:1px 1px 30px 5px;

	margin: 0px;

	list-style-type:none;

	text-align: left;	

}

.navigation ul {

	padding:0px;

	margin: 3px 0px 0px 0px;	

}

.navigation ul a {

	color:#ffffff;

	background-color:transparent;


	margin: 0px 4px 0px 0px;

	/* background-color: blue; */

	text-decoration:none;

	list-style-type:none;

	/* color: white; */

}

.navigation ul a:hover{

	/*	background-color: red; */

	color: #6399cd;

	background-color:#EFF4FA;

	text-decoration:none;


}

.navigation ul li {

float: left;

text-decoration:none;

list-style-type:none;

}

.navigation ul li a {

	float: none;

	text-decoration:none;

	list-style-type:none;

	padding: 5px;

	color:#ffffff;

	background-color:transparent;

	font-size:12px;

	font-weight:bold;

	/* padding:5px 8px; */

}

.navigation ul ul li {

float: none;

width: 150px;

}

.navigation ul ul li a {

background-color: blue;

border-top: 1px solid yellow;

width: 150px;

}

.navigation ul ul li:hover {

background-color: red;	

}

ul.navigation a {

display: block;

}

ul.navigation li ul {

display: none;

position: absolute;

margin: 0px 0px 0px 0px;

}

ul.navigation li:hover ul {

display: block;

z-index: 10;	

}



this is how it looks like:

I was looking for this. i just love the yii community