2nd level dropdown in clear theme!

[12年前 に Fais ritz によって更新されました。]

Hi,

Can i get the 2nd level dropdown menu in clear theme. I am adding child pages but the 2nd level is hidden.

thanks
Fais

[12年前 に Maarten van Heiningen によって更新されました。]

Hi Fais,

You have to make them visible by setting the child-menu classes in the custom.css file.

Maarten

[12年前 に Fais ritz によって更新されました。]

Hi Maarten,

Thanks for reply. Can u please tell me what to change in custom.css. I cant understand what should be visible there.
Thanks
Fais

[12年前 に Path Finder LifeRay によって更新されました。]

Hi Fais,
I have the same problem for getting 2nd level menu visibility, did u get thru it now? if yes please send me ur approach. I have a release on neck now.

Thanks in advance,
Path Finder

[12年前 に Fais ritz によって更新されました。]

Sorry buddy!
Still looking for it.

[12年前 に José Manuel Domínguez Romero によって更新されました。]

Hi,

Control this with #navigation id (see css files of the classic menu) and his descendants. For visibility use display, not the visibility property.

In addition, you must create your own classes. Something like this:

[b][color=#0000ff]--navigation.vm code--[/color][/b]
...

   <div class="navegacion_top"><div></div></div>
      <ul>
         #foreach ($nav_item in $nav_items)
            <li>
               <a href="javascript: void(0);" $nav_item.gettarget()><span>$nav_item.getName()</span></a>

               #if ($nav_item.hasChildren())
                  <ul class="subMenu">
                     #foreach ($nav_child in $nav_item.getChildren())
                        <li>
                           #if (!$nav_child.hasChildren())
                             <a href="$nav_child.getURL()" $nav_child.gettarget()>$nav_child.getName()</a>
                           #end
                           #if ($nav_child.hasChildren())
                              <a href="javascript: void(0);" $nav_child.gettarget()>$nav_child.getName()</a>
                              <ul class="subSubMenu">
                                 #foreach ($nav_child2 in $nav_child.getChildren())
                                    <li>
                                       <a href="$nav_child2.getURL()" target="_blank">
                                          $nav_child2.getName()
...</a></li></ul></li></ul></li></ul>

[b][color=#0000ff]--custom.css code--[/color][/b]
...
#navigation {
	margin-top:			8px;
	background-color:	#FFFFFF;
	font-weight:		bold;
}

#navigation > ul > li {
	display:			inline;
	width:				230px;
	margin:				0px;
	padding:			0px;
	padding-left:		10px;
}

#navigation > ul > li:first-child {
	margin-left:		20px;
}

#navigation > ul > li > a {
	display:			block;
	width:				230px;
	color:				#000000;
	font-size:			11px;
	text-decoration:	none;
}

.subMenu{
	display:			none;
	position:			absolute;
	left:				0px;
}

.subMenu > li{
	width:				100%;
	background-color:	#42899D;
	z-index:			300;
}

.subMenu > li > a{
	padding-left:		10px;
	color:				#000000;
	font-weight:		normal;
	text-decoration:	none;
}

.subSubMenu{
	display:			none;
	position:			absolute;
	top:				0px;
	left:				240px;
	width:				250px;
}

.subSubMenu > li{
	width:				100%;
	background-color:	#42899D;
}

.subSubMenu > li > a{
	padding-left:		10px;
	color:				#000000;
	font-weight:		normal;
	text-decoration:	none;
}
...

And for the effects, javascript.

I hope it's useful to you.

Regards

[12年前 に Path Finder LifeRay によって更新されました。]

Hi jose,
Thanx for your reply. I have one question in that. There is "$nav_child2" in your sample code, how we create that one, i mean already $nav_item, $nav_child are there by default. If we want to create 1 for that purpose how would we do that( since i need it for the second level menu item)

Thanks in advance,
Path Finder

[12年前 に Leo PRATLONG によって更新されました。]

Path Finder LifeRay:

Hi jose,
Thanx for your reply. I have one question in that. There is "$nav_child2" in your sample code, how we create that one, i mean already $nav_item, $nav_child are there by default. If we want to create 1 for that purpose how would we do that( since i need it for the second level menu item)

Thanks in advance,
Path Finder

"$nav_child2" takes its values in #foreach ($nav_child2 in $nav_child.getChildren()) . So "$nav_child2" will take each values from $nav_child.getChildren().
You can also make :
#foreach ($nav_child3 in $nav_child2.getChildren()) etc.
if you need a third level in your navigation menu.

[12年前 に Samir Gami によって更新されました。]

we can create any level of child menu using for loop & navigation element used by theme,

Below link may useful to identify the theme variable,
http://content.liferay.com/4.3/misc/theme-api-4.3.0.html

Thanks,
Samir Gami

[12年前 に Jignesh Vachhani によって更新されました。]

I would suggest to refer existing OOB theme which has 2 level of menu so you will get more and exact idea.
Also you can set any number of level but you should to be aware of velocity framework.

[12年前 に Path Finder LifeRay によって更新されました。]

Hi jignesh,
Thanx for the reply. If you have any links for the development of 2nd level menu just forward them here. I need badly now. I have tried like the following, dont know is this correct or not. This code snippet is from navigation.vm template

#if ($nav_item.hasChildren())
					<ul class="child-menu">
						#foreach ($nav_child in $nav_item.getChildren())
							#if ($nav_child.isSelected())
								<li class="selected">
							#else
								</li><li>
							#end

								<a href="$nav_child.getURL()" $nav_child.gettarget()>$nav_child.getName()</a>
									#if ($nav_child.hasChildren())
										<ul class="child-menu">
										#foreach ($nav_sub_child in $nav_child.getChildren())
											#if ($nav_sub_child.isSelected())
											<li class="selected">
											#else
											</li><li>
											#end
												<a href="$nav_sub_child.getURL()" $nav_sub_child.gettarget()>$nav_sub_child.getName()</a>
											</li>
										#end
										</ul>
									#end
								</li>
						#end
					</ul>
				#end

I tried this and deployed the theme but no effect seen.

Thanks in advance,
Path Finder.

[12年前 に vikash gupta によって更新されました。]

Hi All,

I tried 2nd level navigation in liferay 6.0.3. I installed jedi theme and did some change in navigation.vm and custom.css.
I am pasting attaching here both the files for the people who is struggling in that. I also struggle but finally got the work done.
So please check.
navigation.vm

<nav class="sort-pages modify-pages" id="navigation">
	<h1>
		<span>#language("navigation")</span>
	</h1>

	<ul>
		#foreach ($nav_item in $nav_items)
			#if ($nav_item.isSelected())
				<li class="selected">
			#else
				</li><li>
			#end

				<a href="$nav_item.getURL()" $nav_item.gettarget()><span>$nav_item.getName()</span></a>

				#if ($nav_item.hasChildren())
					<ul>
						#foreach ($nav_child in $nav_item.getChildren())
							#if ($nav_child.isSelected())
								<li class="selected">
							#else
								</li><li>
							#end

								<a href="$nav_child.getURL()" $nav_child.gettarget()>$nav_child.getName()</a>
							</li>
						#end
					</ul>
				#end
			</li>
		#end
	</ul>
</nav>

custom.css

/* -------- Navigation -------- */

#navigation {
	position: relative;
}

#navigation ul {
	-moz-box-shadow: -1px 0 0 #13191D;
	-webkit-box-shadow: -1px 0 0 #13191D;
	box-shadow: -1px 0 0 #13191D;
	padding:0;
	margin: 0;
	list-style: none;
	bottom: 0;
	position: absolute;
	/*
	right: 0;*/
}

#navigation li,
#navigation a {
	float: left;
	position: relative;

}
 
#navigation a {
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	background: #222E35;
	background-image: -moz-linear-gradient(#222E35, #070A0B);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #222E35), color-stop(1.0, #070A0B));
	border: 1px solid;
	border-color: #373F43 #141B1E #000 #1A2327;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	color: #83B1C0;
	display: block;
	padding: 17px 17px 17px 17px;
	text-decoration: none;
	position: relative;
}

#navigation a:active,
#navigation a:focus,
#navigation a:hover {
	color: #FFF;
}

#navigation .selected a {
	background-image: -moz-linear-gradient(#253239, #222E34);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #253239), color-stop(1.0, #222E34));
}

#navigation ul li ul {
	display: none;
}

#navigation ul li:hover ul { 

	-moz-box-shadow: -1px 0 0 #13191D;
	-webkit-box-shadow: -1px 0 0 #13191D;
	box-shadow: -1px 0 0 #13191D;
	margin: 0;
	display:block; 
	position:absolute; 
	top:51px; 
	left:0;
	z-index: 300;
}

#navigation ul li:hover ul li a {
	
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	background: #222E35;
	background-image: -moz-linear-gradient(#222E35, #070A0B);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #222E35), color-stop(1.0, #070A0B));
	border: 1px solid;
	border-color: #373F43 #141B1E #000 #1A2327;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	display:block; 
	color: #83B1C0;
	padding: 10px 10px;
	text-decoration: none;
	width:110px; 
}
 
#navigation ul li:hover ul li a:hover,a:active,a:focus {
	color: #FFF;
}

[12年前 に Path Finder LifeRay によって更新されました。]

Hi vikas,
Thanx for reply. But The code pasted by you is already there for the first level drop down. Let me explain the thing first. I have a menu in my app which resembles nav_item, then each item having childs resembles nav_child, i got upto that already and now i have childs for nav_child. I want to show them as well. Hope you understood the situation, I wrote the code but its not working(it doesn't shows the childs of child items).

Thanks in advance,
Path Finder.

[11年前 に Velraj Kumar によって更新されました。]

Hi Buddy,
Im struggling on creation of 2nd level menu.If you have any solution for this,Kindly forward me.
Regards,
Velraj