Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Fais ritz
2nd level dropdown in clear theme!
May 12, 2011 7:22 AM
Answer

Fais ritz

Rank: Junior Member

Posts: 55

Join Date: April 11, 2011

Recent Posts

Hi,

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

thanks
Fais
Maarten van Heiningen
RE: 2nd level dropdown in clear theme!
May 14, 2011 12:10 PM
Answer

Maarten van Heiningen

Rank: Regular Member

Posts: 172

Join Date: February 5, 2009

Recent Posts

Hi Fais,

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

Maarten
Fais ritz
RE: 2nd level dropdown in clear theme!
May 17, 2011 6:38 AM
Answer

Fais ritz

Rank: Junior Member

Posts: 55

Join Date: April 11, 2011

Recent Posts

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
Path Finder LifeRay
RE: 2nd level dropdown in clear theme!
June 22, 2011 11:19 PM
Answer

Path Finder LifeRay

Rank: Expert

Posts: 262

Join Date: September 18, 2009

Recent Posts

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
Fais ritz
RE: 2nd level dropdown in clear theme!
June 23, 2011 9:48 AM
Answer

Fais ritz

Rank: Junior Member

Posts: 55

Join Date: April 11, 2011

Recent Posts

Sorry buddy!
Still looking for it.
José Manuel Domínguez Romero
RE: 2nd level dropdown in clear theme!
June 28, 2011 4:27 AM
Answer

José Manuel Domínguez Romero

Rank: Regular Member

Posts: 219

Join Date: February 3, 2010

Recent Posts

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:

 1[b][color=#0000ff]--navigation.vm code--[/color][/b]
 2...
 3<div id="navigation" class="sort-pages">
 4   <div class="navegacion_top"><div></div></div>
 5      <ul>
 6         #foreach ($nav_item in $nav_items)
 7            <li>
 8               <a href="javascript: void(0);" $nav_item.getTarget()><span>$nav_item.getName()</span></a>
 9
10               #if ($nav_item.hasChildren())
11                  <ul class="subMenu">
12                     #foreach ($nav_child in $nav_item.getChildren())
13                        <li>
14                           #if (!$nav_child.hasChildren())
15                             <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
16                           #end
17                           #if ($nav_child.hasChildren())
18                              <a href="javascript: void(0);" $nav_child.getTarget()>$nav_child.getName()</a>
19                              <ul class="subSubMenu">
20                                 #foreach ($nav_child2 in $nav_child.getChildren())
21                                    <li>
22                                       <a href="$nav_child2.getURL()" target="_blank">
23                                          $nav_child2.getName()
24...


 1[b][color=#0000ff]--custom.css code--[/color][/b]
 2...
 3#navigation {
 4    margin-top:            8px;
 5    background-color:    #FFFFFF;
 6    font-weight:        bold;
 7}
 8
 9#navigation > ul > li {
10    display:            inline;
11    width:                230px;
12    margin:                0px;
13    padding:            0px;
14    padding-left:        10px;
15}
16
17#navigation > ul > li:first-child {
18    margin-left:        20px;
19}
20
21#navigation > ul > li > a {
22    display:            block;
23    width:                230px;
24    color:                #000000;
25    font-size:            11px;
26    text-decoration:    none;
27}
28
29.subMenu{
30    display:            none;
31    position:            absolute;
32    left:                0px;
33}
34
35.subMenu > li{
36    width:                100%;
37    background-color:    #42899D;
38    z-index:            300;
39}
40
41.subMenu > li > a{
42    padding-left:        10px;
43    color:                #000000;
44    font-weight:        normal;
45    text-decoration:    none;
46}
47
48.subSubMenu{
49    display:            none;
50    position:            absolute;
51    top:                0px;
52    left:                240px;
53    width:                250px;
54}
55
56.subSubMenu > li{
57    width:                100%;
58    background-color:    #42899D;
59}
60
61.subSubMenu > li > a{
62    padding-left:        10px;
63    color:                #000000;
64    font-weight:        normal;
65    text-decoration:    none;
66}
67...


And for the effects, javascript.

I hope it's useful to you.

Regards
Path Finder LifeRay
RE: 2nd level dropdown in clear theme!
July 20, 2011 5:13 AM
Answer

Path Finder LifeRay

Rank: Expert

Posts: 262

Join Date: September 18, 2009

Recent Posts

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
Leo Pratlong
RE: 2nd level dropdown in clear theme!
July 20, 2011 5:21 AM
Answer

Leo Pratlong

Rank: Expert

Posts: 362

Join Date: July 6, 2010

Recent Posts

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
RE: 2nd level dropdown in clear theme!
July 20, 2011 6:08 AM
Answer

Samir Gami

Rank: Regular Member

Posts: 159

Join Date: February 3, 2011

Recent Posts

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
Jignesh Vachhani
RE: 2nd level dropdown in clear theme!
July 20, 2011 7:07 AM
Answer

Jignesh Vachhani

Rank: Liferay Master

Posts: 780

Join Date: March 10, 2008

Recent Posts

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.
Path Finder LifeRay
RE: 2nd level dropdown in clear theme!
July 20, 2011 7:26 AM
Answer

Path Finder LifeRay

Rank: Expert

Posts: 262

Join Date: September 18, 2009

Recent Posts

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
 1
 2#if ($nav_item.hasChildren())
 3                    <ul class="child-menu">
 4                        #foreach ($nav_child in $nav_item.getChildren())
 5                            #if ($nav_child.isSelected())
 6                                <li class="selected">
 7                            #else
 8                                <li>
 9                            #end
10
11                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
12                                    #if ($nav_child.hasChildren())
13                                        <ul class="child-menu">
14                                        #foreach ($nav_sub_child in $nav_child.getChildren())
15                                            #if ($nav_sub_child.isSelected())
16                                            <li class="selected">
17                                            #else
18                                            <li>
19                                            #end
20                                                <a href="$nav_sub_child.getURL()" $nav_sub_child.getTarget()>$nav_sub_child.getName()</a>
21                                            </li>
22                                        #end
23                                        </ul>
24                                    #end
25                                </li>
26                        #end
27                    </ul>
28                #end

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

Thanks in advance,
Path Finder.
vikash gupta
RE: 2nd level dropdown in clear theme!
July 23, 2011 4:09 PM
Answer

vikash gupta

Rank: New Member

Posts: 2

Join Date: July 23, 2011

Recent Posts

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
 1
 2<nav class="sort-pages modify-pages" id="navigation">
 3    <h1>
 4        <span>#language("navigation")</span>
 5    </h1>
 6
 7    <ul>
 8        #foreach ($nav_item in $nav_items)
 9            #if ($nav_item.isSelected())
10                <li class="selected">
11            #else
12                <li>
13            #end
14
15                <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>
16
17                #if ($nav_item.hasChildren())
18                    <ul>
19                        #foreach ($nav_child in $nav_item.getChildren())
20                            #if ($nav_child.isSelected())
21                                <li class="selected">
22                            #else
23                                <li>
24                            #end
25
26                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
27                            </li>
28                        #end
29                    </ul>
30                #end
31            </li>
32        #end
33    </ul>
34</nav>


custom.css

  1
  2
  3
  4/* -------- Navigation -------- */
  5
  6#navigation {
  7    position: relative;
  8}
  9
 10#navigation ul {
 11    -moz-box-shadow: -1px 0 0 #13191D;
 12    -webkit-box-shadow: -1px 0 0 #13191D;
 13    box-shadow: -1px 0 0 #13191D;
 14    padding:0;
 15    margin: 0;
 16    list-style: none;
 17    bottom: 0;
 18    position: absolute;
 19    /*
 20    right: 0;*/
 21}
 22
 23#navigation li,
 24#navigation a {
 25    float: left;
 26    position: relative;
 27
 28}
 29
 30#navigation a {
 31    -moz-border-radius-topleft: 4px;
 32    -moz-border-radius-topright: 4px;
 33    -webkit-border-top-left-radius: 4px;
 34    -webkit-border-top-right-radius: 4px;
 35    background: #222E35;
 36    background-image: -moz-linear-gradient(#222E35, #070A0B);
 37    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #222E35), color-stop(1.0, #070A0B));
 38    border: 1px solid;
 39    border-color: #373F43 #141B1E #000 #1A2327;
 40    border-top-left-radius: 3px;
 41    border-top-right-radius: 3px;
 42    color: #83B1C0;
 43    display: block;
 44    padding: 17px 17px 17px 17px;
 45    text-decoration: none;
 46    position: relative;
 47}
 48
 49#navigation a:active,
 50#navigation a:focus,
 51#navigation a:hover {
 52    color: #FFF;
 53}
 54
 55#navigation .selected a {
 56    background-image: -moz-linear-gradient(#253239, #222E34);
 57    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #253239), color-stop(1.0, #222E34));
 58}
 59
 60#navigation ul li ul {
 61    display: none;
 62}
 63
 64#navigation ul li:hover ul {
 65
 66    -moz-box-shadow: -1px 0 0 #13191D;
 67    -webkit-box-shadow: -1px 0 0 #13191D;
 68    box-shadow: -1px 0 0 #13191D;
 69    margin: 0;
 70    display:block;
 71    position:absolute;
 72    top:51px;
 73    left:0;
 74    z-index: 300;
 75}
 76
 77#navigation ul li:hover ul li a {
 78   
 79    -moz-border-radius-topleft: 4px;
 80    -moz-border-radius-topright: 4px;
 81    -webkit-border-top-left-radius: 4px;
 82    -webkit-border-top-right-radius: 4px;
 83    background: #222E35;
 84    background-image: -moz-linear-gradient(#222E35, #070A0B);
 85    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #222E35), color-stop(1.0, #070A0B));
 86    border: 1px solid;
 87    border-color: #373F43 #141B1E #000 #1A2327;
 88    border-top-left-radius: 3px;
 89    border-top-right-radius: 3px;
 90    display:block;
 91    color: #83B1C0;
 92    padding: 10px 10px;
 93    text-decoration: none;
 94    width:110px;
 95}
 96
 97#navigation ul li:hover ul li a:hover,a:active,a:focus {
 98    color: #FFF;
 99}
Path Finder LifeRay
RE: 2nd level dropdown in clear theme!
July 24, 2011 10:28 PM
Answer

Path Finder LifeRay

Rank: Expert

Posts: 262

Join Date: September 18, 2009

Recent Posts

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.
Velraj Kumar
RE: 2nd level dropdown in clear theme!
July 6, 2012 5:52 AM
Answer

Velraj Kumar

Rank: New Member

Posts: 6

Join Date: June 19, 2012

Recent Posts

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