Developing Mega menu in navigation.vm template

[ramakanth reddy, geändert vor 10 Jahren.]

Hi All

I am trying to implement Mega menu in navigation.vm but when i am trying add any html content in navigation.vm it is not getting reflected in browser and when i view the page source the html content is hidden ,Anyone can help me how to embedded html content in navigation.vm template.

In below navigation.vm i am trying to add div tag and add background image for div tag but image is not getting refelected in UI

navigation.vm source code:

<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 href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
<div style="background-image: url(../images/DSC00297.JPG);">
#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 href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName() ${image_folder}</a>
</li>
#end
</ul>
#end
</div>
</li>
#end
</ul>
</nav>


please help me ,if anyone have idea regarding this

Regards
Ramakanth

[ramakanth reddy, geändert vor 10 Jahren.]

Bradley Wood:

for the background image style you need to use ${image_folder} variable because even though you are referencing css since you are in the theme's template file you need to grab the url to the theme.

A mega menu that I worked on is viewable at http://worldimpact.org I used the page description for the text blurb and then a custom field to pages that would determine which column the nav item would be displayed in.

Hi Bradley Wood

Could you please provide guidelines how to achieve as i am completely blocked where to start . which files need to be modified,could you please provide sample code if you have.

Regards
Ramakanth

[ramakanth reddy, geändert vor 10 Jahren.]

i tried to display ${image_folder} in navigation.vm but still it doesn't return any value.

[Rajeeva Lochana .B.R, geändert vor 10 Jahren.]

Hi ramakanth reddy,

${image_folder} it give the path upto image folder.

If the theme name is sample-theme, then we are getting Domain-name/sample-theme/image/ from ${image_folder} velocity variable.

To fetch the image we need to give the absolute path.

Example :

<img src="${image_folder}/custom/sample-image.jpg" alt="sample-image">