Yii Framework Forum: [Solved] Two row horizontal menu - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

[Solved] Two row horizontal menu Using CMenu ? Rate Topic: -----

#1 User is offline   Scryii 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 54
  • Joined: 30-September 10
  • Location:Germany, Munich

Posted 08 November 2010 - 07:11 AM

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:
0

#2 User is offline   Scryii 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 54
  • Joined: 30-September 10
  • Location:Germany, Munich

Posted 12 November 2010 - 03:26 PM

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
7. Add the html statement
</ul>
AFTER the menu
8. 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;
}


9. Have fun ::)
0

#3 User is offline   jacmoe 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 3,317
  • Joined: 10-October 10
  • Location:Denmark

Posted 12 November 2010 - 03:39 PM

Nice!
Do you have a screen shot? :)
"Less noise - more signal"
0

#4 User is offline   Scryii 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 54
  • Joined: 30-September 10
  • Location:Germany, Munich

Posted 12 November 2010 - 03:44 PM

View Postjacmoe, on 12 November 2010 - 03:39 PM, said:

Nice!
Do you have a screen shot? :)


Yes.

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

Attached File(s)

  • Attached File  yii.jpg (41.79K)
    Number of downloads: 416

0

#5 User is offline   wsw36 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 23
  • Joined: 31-March 11
  • Location:Surabaya

Posted 04 July 2011 - 12:08 PM

View PostScryii, on 12 November 2010 - 03:44 PM, said:

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.. :)
0

#6 User is offline   xNicox 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 86
  • Joined: 19-October 10

Posted 16 October 2011 - 10:51 PM

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:

Attached File(s)


Lic. Nicolas Machado
0

#7 User is offline   chege 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 27-May 14
  • Location:Kenya

Posted 27 May 2014 - 04:13 AM

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

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users