Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Rupesh Chotai
Second level navigation with child pages in horizontal navigation bar
January 15, 2013 7:12 AM
Answer

Rupesh Chotai

Rank: Regular Member

Posts: 163

Join Date: March 23, 2011

Recent Posts

Hi,
I have been looking for implementing second level navigation - where child pages comes horizontally. I read various post and suggestion but none work for me. I tried changing navigation.vm in the theme but no success. Also tried various options suggested in post below:

http://www.liferay.com/community/forums/-/message_boards/message/1366392

Anybody got it working? Please share your suggestion/solutions.

Thanks in advance !
David H Nebinger
RE: Second level navigation with child pages in horizontal navigation bar
January 15, 2013 8:59 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6268

Join Date: September 1, 2006

Recent Posts

navigation.vm is only generating basic HTML elements for the menu items.

Any change to the actual presentation will need to go into the theme's CSS. I'm guessing that the <li> element is defined as a block element (or inline block) and you want it to be an inline element.

Note there is nothing Liferay-specific about doing a horizontal menu, it is all CSS related.
Rupesh Chotai
RE: Second level navigation with child pages in horizontal navigation bar
January 15, 2013 10:48 AM
Answer

Rupesh Chotai

Rank: Regular Member

Posts: 163

Join Date: March 23, 2011

Recent Posts

Hi David,
Thanks for reply.
I understand that showing sub menu is CSS work, however, even after modifying the navigation.vm file in my theme, I couldnt see 2 level of menus. I might be missing something here, not sure.

Sharing my navigation.vm code below
 1
 2<div id="navigation" class="sort-pages modify-pages">
 3    <ul>
 4        #foreach ($nav_item in $nav_items)
 5            #if ($nav_item.isSelected())
 6                #set ($nav_item_class = "selected")
 7            #else
 8                #set ($nav_item_class = "")
 9            #end
10
11            <li class="$nav_item_class">
12                <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>
13                #if ($nav_item.hasChildren())
14                    <ul class="child-menu">
15                        #foreach ($nav_child in $nav_item.getChildren())
16                            <li>
17                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
18                           </li>
19                        #end
20                    </ul>
21                #end
22            </li>
23      #end
24    </ul>
25</div>
26#foreach ($nav_item in $nav_items)
27    #if ($nav_item.isSelected())
28       #if ($nav_item.hasChildren())
29            <div id="subnav">
30            <ul>               
31                #foreach ($nav_child in $nav_item.getChildren())
32                   #if ($nav_child.isSelected())
33                        #set ($nav_child_class = "page-selected")
34                    #else
35                        #set ($nav_child_class = "")
36                    #end
37                    <li class="$nav_child_class">
38                       <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
39                   </li>
40                #end
41            </ul>
42            </div>
43        #end
44    #end
45#end


If you have any working example of 2 level navigation, can you please share?

Thanks.
David H Nebinger
RE: Second level navigation with child pages in horizontal navigation bar
January 15, 2013 11:07 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6268

Join Date: September 1, 2006

Recent Posts

The normal navigation.vm already supports the 2nd level navigation...

What you've got here will generate the <div id="navigation" ...></div> section which liferay will generate the menu bar and the drop down menu from. I'm guessing this is probably working exactly as normal.

The second stanza that you added would put a <div id="subnav" ...></div> area where the child links are also added.

The first stanza should probably have the sub items stripped out of it which should block the display of the dropdown menu.

Your css would need to handle the subnav div. You'll want to add css to style it around the navigation class, basically mimicking the navigation so there is a bar there to display them in, followed by styling for the ul, li, and a elements to render horizontally rather than vertically.

This would be the change to have a permanent horizontal menu.

For a dropdown horizontal menu, the second stanza is not necessary. The first stanza would remain as-is. You would need to find the navigation class CSS, and your changes would go in the ul with the child-menu class. Here you would style it to start from the left side of the page rather than being relative to the parent. The li and a elements would need to be styled so they were treated as inline elements rather than block elements so they'll stay in a single line.

I covered both types of horizontal menu because it is not apparent to me which of the two you're looking to achieve...
Rupesh Chotai
RE: Second level navigation with child pages in horizontal navigation bar
January 21, 2013 2:05 PM
Answer

Rupesh Chotai

Rank: Regular Member

Posts: 163

Join Date: March 23, 2011

Recent Posts

Thanks David for the detail reply. I will try out these options.
Abid Ali
RE: Second level navigation with child pages in horizontal navigation bar
April 11, 2013 1:04 AM
Answer

Abid Ali

Rank: Junior Member

Posts: 89

Join Date: March 30, 2012

Recent Posts

Hi David,

I have same requirement . its difficult for me to understand. can u share me the codes of sub menu in .css and navigation.vm file.
and i created the sub menu in childpage format.
Karthikeyan M
RE: Second level navigation with child pages in horizontal navigation bar
April 11, 2013 1:21 AM
Answer

Karthikeyan M

Rank: Junior Member

Posts: 30

Join Date: February 16, 2013

Recent Posts

Abid Ali:
Hi David,

I have same requirement . its difficult for me to understand. can u share me the codes of sub menu in .css and navigation.vm file.
and i created the sub menu in childpage format.



Hi Abid Ali,

Here is my code for the navigation.vm file for the Second level Sub Navigation. Hope this will Helps to You.
  1<div id="navigation" class="sort-pages modify-pages">
  2      <ul id="nav">
  3          #set($counter=0)
  4          #foreach ($nav_item in $nav_items)
  5              #if ($nav_item.isSelected())
  6                  #set ($nav_item_class = "selected")
  7              #else
  8                  #set ($nav_item_class = "")
  9              #end
 10            #if($nav_item.getName()!="")
 11                   #if ($nav_item.hasChildren())
 12                    <li class="$nav_item_class">
 13                        <div>
 14                        <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span>
 15                        <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
 16                        <ul class="child-menu">
 17                            #foreach ($nav_child in $nav_item.getChildren())
 18                               #if ($nav_child.isSelected())
 19                                        #set ($nav_child_class = "selected")
 20                                #else
 21                                        #set ($nav_child_class = "")
 22                                #end
 23                                 #if ($nav_child.hasChildren())
 24                                 <li>
 25                                     <a href="$nav_child.getURL()" $nav_child.getTarget() class="$nav_child_class"><span>$nav_child.getName()</span>
 26                                    <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
 27                                        <ul class="child-menu">
 28                                             #foreach ($nav_child2 in $nav_child.getChildren())
 29                                                 #if ($nav_child2.isSelected())
 30                                                         #set ($nav_child2_class = "selected")
 31                                                #else
 32                                                         #set ($nav_child2_class = "")
 33                                                 #end
 34                                                 #if ($nav_child2.hasChildren())
 35                                                 <li>
 36                                                     <a href="$nav_child2.getURL()" $nav_child2.getTarget()><span>$nav_child2.getName()</span>
 37                                                     <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
 38                                                         <ul class="child-menu">
 39                                                             #foreach ($nav_child3 in $nav_child2.getChildren())
 40                                                                 #if ($nav_child3.isSelected())
 41                                                                         #set ($nav_child3_class = "selected")
 42                                                                 #else
 43                                                                         #set ($nav_child3_class = "")
 44                                                                 #end
 45                                                                 #if ($nav_child3.hasChildren())
 46                                                                 <li>
 47                                                                     <a href="$nav_child3.getURL()" $nav_child3.getTarget()><span>$nav_child3.getName()</span>
 48                                                                     <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
 49                                                                         <ul class="child-menu">
 50                                                                             #foreach ($nav_child4 in $nav_child3.getChildren())
 51                                                                                 #if ($nav_child4.isSelected())
 52                                                                                         #set ($nav_child4_class = "selected")
 53                                                                                 #else
 54                                                                                         #set ($nav_child4_class = "")
 55                                                                                 #end
 56                                                                                 #if ($nav_child4.hasChildren())
 57                                                                                 <li>
 58                                                                                     <a href="$nav_child4.getURL()" $nav_child4.getTarget()><span>$nav_child4.getName()</span>
 59                                                                                     <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
 60                                                                                         <ul class="child-menu">
 61                                                                                             #foreach ($nav_child5 in $nav_child4.getChildren())
 62                                                                                                 #if ($nav_child5.isSelected())
 63                                                                                                         #set ($nav_child5_class = "selected")
 64                                                                                                 #else
 65                                                                                                         #set ($nav_child5_class = "")
 66                                                                                                 #end
 67                                                                                                 <li>
 68                                                                                                     <a href="$nav_child5.getURL()" $nav_child5.getTarget() ><span>$nav_child5.getName()<span></a>
 69                                                                                                 </li>
 70                                                                                             #end
 71                                                                                         </ul>
 72                                                                                     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 73                                                                                 #else
 74                                                                                 <li>
 75                                                                                 <a href="$nav_child4.getURL()" $nav_child4.getTarget()><span>$nav_child4.getName()</span></a>
 76                                                                                 #end   
 77                                                                             #end
 78                                                                         </ul>
 79                                                                     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 80                                                                 #else
 81                                                                 <li>
 82                                                                 <a href="$nav_child3.getURL()" $nav_child3.getTarget()><span>$nav_child3.getName()</span></a>
 83                                                                 #end   
 84                                                             #end
 85                                                         </ul>
 86                                                     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 87                                                 #else
 88                                                <li>
 89                                                 <a href="$nav_child2.getURL()" $nav_child2.getTarget()><span>$nav_child2.getName()</span></a>
 90                                                 #end   
 91                                                 </li>   
 92                                             #end
 93                                           
 94                                         </ul>
 95                                     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 96                                 #else
 97                                 <li>
 98                                 <a href="$nav_child.getURL()" $nav_child.getTarget()><span>$nav_child.getName()</span></a>
 99                                 #end   
100                                </li>   
101                            #end
102                        </ul>
103                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
104                    #else
105                    <li>
106                    <div>
107                    <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>
108                    #end
109                    </div>
110                </li>      
111            #else
112                #if($counter!=0)
113                #else
114                    <li><span>&nbsp;</span></li>
115                    #set($counter=1)
116                #end
117            #end
118        #end
119    </ul>
120</div>
Abid Ali
RE: Second level navigation with child pages in horizontal navigation bar
April 11, 2013 1:38 AM
Answer

Abid Ali

Rank: Junior Member

Posts: 89

Join Date: March 30, 2012

Recent Posts

Thankx..
but ur code is not working for me. i put it on navigation.vm file.
Karthikeyan M
RE: Second level navigation with child pages in horizontal navigation bar
April 11, 2013 1:57 AM
Answer

Karthikeyan M

Rank: Junior Member

Posts: 30

Join Date: February 16, 2013

Recent Posts

Abid Ali:
Thankx..
but ur code is not working for me. i put it on navigation.vm file.



Try this custom.css file.


  1/* Base Style */
  2body {
  3    background: #7F5A58;
  4    font-size: 11px;
  5}
  6
  7a {
  8    color: #5B677D;
  9    text-decoration: underline;
 10}
 11
 12a:hover {
 13    color: #06C;
 14    text-decoration: none;
 15}
 16
 17hr, .separator {
 18    border-color: #BFBFBF transparent #FFF;
 19    border-style: solid;
 20    border-width: 1px 0;
 21}
 22
 23#wrapper {
 24    background: none;
 25    margin: 0 auto;
 26    max-width: 90%;
 27    min-width: 960px;
 28    position: relative;
 29}
 30
 31.ie6 #wrapper {
 32    width: 90%;
 33}
 34
 35#banner {
 36    background: none;
 37    height: auto;
 38    margin-top: 1.4em;
 39    position: relative;
 40}
 41
 42.site-title .site-name {
 43    background: #555 url(../images/common/site_icon.png) no-repeat 15px 50%;
 44    color: #FFF;
 45    display: block;
 46    float: right;
 47    font-size: 1em;
 48    font-weight: bold;
 49    margin: 15px 0 0 20px;
 50    padding: 7px 17px 7px 40px;
 51    position: relative;
 52    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
 53}
 54
 55.page-template .site-title .site-name {
 56    background-image: url(../images/common/page_template.png);
 57}
 58
 59.site-template .site-title .site-name {
 60    background-image: url(../images/common/site_template.png);
 61}
 62
 63.company-site .site-title .site-name {
 64    background-image: url(../images/common/folder.png);
 65}
 66
 67.organization-site .site-title .site-name {
 68    background-image: url(../images/common/organization_icon_white.png);
 69}
 70
 71.user-site .site-title .site-name {
 72    background-image: url(../images/common/user_icon_white.png);
 73}
 74
 75.private-page .site-title .site-name:after {
 76    background-image: url(../images/common/key_small.png);
 77    content: '';
 78    display: block;
 79    height: 10px;
 80    left: 24px;
 81    position: absolute;
 82    top: 50%;
 83    width: 10px;
 84}
 85
 86#skip-to-content:focus {
 87    clip: rect(auto auto auto auto);
 88    right: 0;
 89    z-index: 200;
 90}
 91
 92#sign-in {
 93    background: url(@theme_image_path@/common/key.png) no-repeat 3px 50%;
 94    font-weight: bold;
 95    padding: 5px 5px 5px 25px;
 96    position: absolute;
 97    right: 0;
 98    top: -1.2em;
 99}
100
101.ie6 #banner {
102    height: 1%;
103}
104
105.ie6 #banner h1.logo {
106    height: 1%;
107}
108
109
110
111/* drop down */
112
113#navigation, #navigation * {
114      z-index:9999;
115  }
116 
117 
118#navigation {
119   
120    clear: both;
121    margin: 0 auto 5px;
122    min-height: 4.4em;
123    padding: 0 175px;
124    position: relative;
125    z-index: 1;
126
127}
128
129#navigation ul,
130#add-page {
131    float: left;
132}
133
134#navigation a {
135    background: #E5ECF9;
136    border: 1px solid #7AA5D6;
137    color: #262626;
138    display: block;
139    font: 12px Arial, Helvetica, sans-serif;
140    margin: 0 4px 0 0;
141    padding: 3px 10px 4px;
142    text-decoration: none;
143}
144
145#navigation .selected a {
146    background: #FFF;
147    border-bottom: 1px solid #FFF;
148    color: #36C;
149    font-weight: bold;
150}
151
152#navigation .cancel-page {
153    display: none;
154}
155
156#navigation .save-page {
157    display: inline;
158}
159
160 #navigation li {
161 position:relative;
162 vertical-align: top;
163
164
165 }
166/*****************/
167/* hide the sub levels and give them a positon absolute so that they take up no room */
168#navigation ul ul {
169visibility:hidden;
170position:absolute;
171}
172
173
174/* style the table so that it takes no part in the layout - required for IE to work */
175#navigation table {position:absolute; }
176
177/* style the second level links */
178#navigation ul ul a, #navigation ul ul a:visited {
179filter: alpha(opacity = 80);
180-moz-opacity: 0.85;
181opacity: 0.85;
182font-weight:normal;
183background:#000;
184height:auto;
185line-height:1em;
186/*padding:5px 10px;*/
187/*width:12em;*/
188text-align:left;
189}
190
191/* style the top level hover */
192#navigation a:hover{
193    background: #3068BA url(../images/arrows/01_right.png) no-repeat scroll 2px 30%;
194
195color:#52D017;
196}
197#navigation .drop1 a:hover,#navigation ul ul a:hover{
198color:#666666;
199background:#FFF;
200}
201#navigation .drop1 :hover > a, #navigation ul ul :hover > a {
202color:#000;
203background:#FFF;
204}
205
206/* make the second level visible when hover on first level list OR link */
207#navigation ul li:hover ul,
208#navigation ul a:hover ul{
209visibility:visible;
210}
211/* keep the third level hidden when you hover on first level list OR link */
212#navigation ul :hover ul ul{
213visibility:hidden;
214}
215/* keep the fourth level hidden when you hover on second level list OR link */
216#navigation ul :hover ul :hover ul ul{
217visibility:hidden;
218}
219/* make the third level visible when you hover over second level list OR link */
220#navigation ul :hover ul :hover ul{
221visibility:visible;
222}
223/* make the fourth level visible when you hover over third level list OR link */
224#navigation ul :hover ul :hover ul :hover ul {
225visibility:visible;
226}
227#navigation li a span{
228    padding:0px;
229    margin:0px;
230    padding-left:5px;
231    padding-right:3px;
232    margin-right:3px;
233    margin-left:3px;
234    line-height:18px;
235    min-width:0px;
236    width:0px;
237}
238/*drop down ends*/
239
240
241/* ---------- drop down menu ---------- */
242#nav, #nav ul{
243     margin:0;
244     padding:0;
245     list-style-type:none;
246     list-style-position:outside;
247    /* position:relative;*/
248     line-height:1.5em;
249 }
250
251  #nav a:link, #nav a:active, #nav a:visited{
252    display:block;
253    padding:0px 5px;
254    border:1px solid #769C9E;
255    color:#fff;
256      width:12em;
257    text-decoration:none;
258    background-color:#333;
259 }
260
261#nav a:hover{
262    background-color:#fff;
263    color:#333;
264}
265
266#nav li{
267    width:14em;
268    float:left;
269    position:relative;
270}
271
272#nav ul {
273    position:relative;
274    /* to make the menu above iframes */
275/*    z-index:110;*/
276   
277    width:12em;
278    height:1em;
279    top:1.5em;
280    display:none;
281}
282
283#nav li ul a{
284    width:8em;
285    height:3em;
286    float:left;
287}
288
289#nav ul ul{
290    top:auto;
291    }   
292
293#nav li ul ul {
294    left:12em;
295    margin:0px 0 0 10px;
296    }
297
298#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
299    display:none;
300    }
301#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
302    display:block;
303    }
304/*-----------------drop down menu end------*/
305
306
307
308/* This file allows you to override default styles in one central location for easier upgrade and maintenance. */
309
310/* ---------- Main content body ---------- */
311
312#content-wrapper {
313    padding: 15px 27px;
314}
315
316/* ---------- Banner ---------- */
317
318#banner {
319    padding: 32px 0 25px;
320}
321
322#banner .logo {
323    margin: 0;
324}
325
326#banner .logo a {
327    margin: 0 auto;
328}
329
330/* ---------- Dock with JavaScript ---------- */
331
332.js .interactive-mode {
333    right: 27px;
334    top: 27px;
335}
336
337/* ---------- Main navigation ---------- */
338
339.enter-page input {
340    margin-right: 4px;
341    padding-bottom: 4px;
342}
343
344.ie .enter-page {
345    position: relative;
346    top: -1px;
347}
348
349.ie .save-page {
350    position: relative;
351    top: -4px;
352}
353
354/* ---------- Portlet ---------- */
355
356.portlet {
357    background-color: #EEF0F2;
358    border: 1px solid #C8C9CA;
359    margin: 0 0 10px;
360    padding: 3px;
361    text-align: left;
362   
363}
364
365.portlet-topper {
366    background: #D4D4D4 url(@theme_image_path@/portlet/header_bg.png) repeat-x 0 0;
367    border: 1px solid;
368    border-color: #C8C9CA #9E9E9E #9E9E9E #C8C9CA;
369    font-size: 1.1em;
370
371}
372
373.portlet-title {
374    color: #249;
375    font: bold 12px Arial, Helvetica, sans-serif;
376}
377
378.portlet-title img {
379    display: none;
380}
381
382.portlet-content {
383    font: 12px Arial, Helvetica, sans-serif;
384    padding: 9px 5px;
385}
386
387/* ---------- Tabs ---------- */
388
389.ui-tabs {
390    border-bottom: 1px solid #676767;
391}
392
393.ui-tabs li a,
394.tabs li span,
395.ui-tabs li a:hover,
396.ui-tabs li span:hover {
397    background: #DDD;
398    border: 1px solid #AAA;
399    border-bottom: 1px solid #676767;
400    color: #000;
401    font: 11px Arial, Helvetica, sans-serif;
402    margin: 0 3px 0 0;
403    padding: 2px 16px;
404    text-decoration: none;
405}
406
407.ui-tabs li.current a,
408.ui-tabs li.current span,
409.ui-tabs li.current a:hover,
410.ui-tabs li.current span:hover {
411    background: #fff;
412    border: 1px solid #676767;
413    border-bottom: 1px solid #FFF;
414    color: #36C;
415    font: bold 11px Arial, Helvetica, sans-serif;
416}
417
418
419
420