留言板
2nd level dropdown in clear theme!
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
Can i get the 2nd level dropdown menu in clear theme. I am adding child pages but the 2nd level is hidden.
thanks
Fais
Maarten van Heiningen,修改在12 年前。
RE: 2nd level dropdown in clear theme!
Regular Member 帖子: 174 加入日期: 09-2-5 最近的帖子
Hi Fais,
You have to make them visible by setting the child-menu classes in the custom.css file.
Maarten
You have to make them visible by setting the child-menu classes in the custom.css file.
Maarten
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
Thanks for reply. Can u please tell me what to change in custom.css. I cant understand what should be visible there.
Thanks
Fais
Path Finder LifeRay,修改在12 年前。
RE: 2nd level dropdown in clear theme!
Expert 帖子: 262 加入日期: 09-9-18 最近的帖子
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
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
Sorry buddy!
Still looking for it.
Still looking for it.
José Manuel Domínguez Romero,修改在12 年前。
RE: 2nd level dropdown in clear theme!
Regular Member 帖子: 219 加入日期: 10-2-3 最近的帖子
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:
And for the effects, javascript.
I hope it's useful to you.
Regards
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
Path Finder LifeRay,修改在12 年前。
RE: 2nd level dropdown in clear theme!
Expert 帖子: 262 加入日期: 09-9-18 最近的帖子
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
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
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.
Samir Gami,修改在12 年前。
RE: 2nd level dropdown in clear theme!
Regular Member 帖子: 162 加入日期: 11-2-4 最近的帖子
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
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
Jignesh Vachhani,修改在12 年前。
RE: 2nd level dropdown in clear theme!
Liferay Master 帖子: 803 加入日期: 08-3-10 最近的帖子
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.
Also you can set any number of level but you should to be aware of velocity framework.
Path Finder LifeRay,修改在12 年前。
RE: 2nd level dropdown in clear theme!
Expert 帖子: 262 加入日期: 09-9-18 最近的帖子
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
I tried this and deployed the theme but no effect seen.
Thanks in advance,
Path Finder.
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.
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
custom.css
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;
}
Path Finder LifeRay,修改在12 年前。
RE: 2nd level dropdown in clear theme!
Expert 帖子: 262 加入日期: 09-9-18 最近的帖子
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.
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.