Setting the "title" attribute of main menu link items (or page names)

Question

I'd like to have tool tips when I mouse over the main menu items in Liferay. By default, there is no way to do this. Even in the *.vm files, the mark up does not include any title attribute for the links.

The way I'm trying to go about it is to have a custom attribute defined for a page. This gives me an interface in Liferay itself to enter title values I may want. I am then planning to use this value as the title value for the menu links. Not sure if this will work though.

Is there a better way that I don't know of?

Prakash K · Answer 1 · 2013-01-05T11:47:29.190

1

Then I think you can use the HTML Title for the page description as shown in the figure:

enter image description here

And you can use this ($nav_item.getTitle()) in the title attribute of <a> tag of your custom theme's navigation.vm as @Sharana mentions:

<a title="$nav_item.getTitle()" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

You can also use this ($nav_item.getLayout().getHTMLTitle($locale)):

<a title="$nav_item.getLayout().getHTMLTitle($locale)" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

I would prefer this approach as it is much cleaner since it does not involve adding a new custom field and the work is done using what is already present in liferay and reduces a call to expando (may be this does not matter that much).

Hope this helps in giving you some lead.

edited Jan 05 '13 at 11:47

answered Jan 04 '13 at 15:21

Prakash K

11,669
6
51
109

Adding $the_title gives the the tilte of the currently loaded page to every menu link. Obviously not what's needed. But I just have to figure out how to access the right variable I guess. Any idea how to access custom variables in the .vm files? – Gaurav Sharma Jan 04 '13 at 16:38
oops! I missed that one, actually I meant to get the `title` from `$nav_item` i.e. `$nav_item.getTitle()` or `$nav_item.getLayout().getHTMLTitle($locale)` for the different menu pages. I have edited my answer. – Prakash K Jan 05 '13 at 11:43

score 0 · Answer 2 · answered Jan 04 '13 at 00:18

0

Why you think there is no way to do this in navigation.vm?

below is the code from navigation.vm

<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

if you add title attribute to this,

<a title="$htmlUtil.escape($nav_item.getName())" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

It works.

similarly for children items.

answered Jan 04 '13 at 00:18

Sharana

749
3
8

1

I think he is not asking as to how to include a `title` attribute for the menu links, instead he is asking a way to define `title`'s value just like when we create a page we define `Page Name`, `Page Type`, `Page Template` etc he wants to define `Page Title` and then he would include that `Page Title` as the `title` attribute of `` tag in the theme template as you have shown. So @GauravSharma am I right in understanding your needs? – Prakash K Jan 04 '13 at 09:28
@PrakashK yes that is correct. The title attribute value will always be different from the $nav_item.getName() value. It will be a description of the link. I need an interface in Liferay so that the admin can configure it and no developer involvement is required each time a new page or menu item is created. – Gaurav Sharma Jan 04 '13 at 15:09
1

@GauravSharma, I just gave you an example how it can be done. replacing it with the user friendly set of values for the title attribute from the Layout object is what you need to do. Personally I think custom filed approach is a complex one comapred to this. Also I dont think I deserve a -ve vote for my answer.. ;-) Cheers. – Sharana Jan 07 '13 at 00:12

score 0 · Accepted Answer · answered Jan 04 '13 at 17:30

The correct answer is in the direction I was going originally. Create a custom field related to a page and then use that in the velocity template. Here is the entire code for the navigation menu where menuTitle is the name of my custom variable:

<nav class="$nav_css_class" id="navigation">
    <h1>
        <span>#language("navigation")</span>
    </h1>

    <ul>
        #foreach ($nav_item in $nav_items)
            #if ($nav_item.isSelected())
                <li class="selected">
            #else
                <li>
            #end
                <a title="$nav_item.getLayout().getExpandoBridge().getAttribute("menuTitle")" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>

                #if ($nav_item.hasChildren())
                    <ul class="child-menu">
                        #foreach ($nav_child in $nav_item.getChildren())
                            #if ($nav_child.isSelected())
                                <li class="selected">
                            #else
                                <li>
                            #end
                                <a title="$nav_child.getLayout().getExpandoBridge().getAttribute("menuTitle")" href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
                            </li>
                        #end
                    </ul>
                #end
            </li>
        #end
    </ul>
</nav>

I have edited my answer so that you don't have to create a `custom-field`. — Prakash K, Jan 05 '13 at 11:44

score 0 · Answer 4 · answered Jan 07 '13 at 09:26

Both solutions are good.

It just depends on if the tool tip text needs to be different than the html page title. If it does, go the custom attribute route. If it doesn't, reuse the html title method.

Forgive me if I'm missing something here. If I am, please clarify.

Setting the "title" attribute of main menu link items (or page names)

4 Answers4