Adding "teaser" custom content to drop down menus

[Jonny]

I'm working on a new design that will include "teasers" within drop down navigation menus i.e. the dropped down menus will have on one side an area of content relating to one of the pages linked in that menu.

item 1   |    teaser
item 2   |    content
item 3   |    goes    
item 4   |    here

The teaser is contained within a list element with a class attribute.

Can anyone provide a lead on how to build this into CMSMS, with the Menu Manager in operation and Global Content Blocks for the teaser content? The question is how to inject the teasers into the appropriate menus.

Preferably, the solution would be "set and forget" i.e. not require hardcoding of any page/content ids into the menu template, and would determine whether to display a teaser, and which one to use, from data associated with the parent page/section header, Extra Page Attributes perhaps?

The system need only apply to one level of drop downs.

[lollipop27]

Is the custum content for each parent item or for each item in the drop down.

If it was for each item in the dropdown you could use the extra fields per page and add them to the menu items.

[Jonny]

Thanks for your reply.

It's just a single static block of content for the entire drop down, remaining unchanged no matter which menu item in the drop down is hovered.

For example:

Code: Select all

<ul>
	<li><a>Drop Down Parent/SectionHeader</a>
		<ul>
			<li class="teaser">Teaser content</li>
			<li><a>Drop down menu item 1</a></li>
			<li><a>Drop down menu item 2</a></li>
			<li><a>Drop down menu item 3</a></li>
		</ul>
	</li>
	<li><a>Another top level menu item</a></li>
	<li><a>Another top level menu item</a></li>
</ul>

[Jonny]

Well, I've made some progress using Extra Page Attributes in the Section Header of the drop down menu.

EPA 1: teaser
EPA 2: name of Global Content Block to use for teaser content

Adding the following code to certain locations within the menu manager template will display the desired GCB.

Code: Select all

{if $node->extra1 == 'teaser'}{global_content name=$node->extra2}{/if}

But I've not yet found how to make it display in the correct location i.e. within the nested ul Here. Here's the menu template without the added code (it's the CMSMS accessible_cssmenu.tpl without the wrapper div).

Can anyone suggest how to modify this to place the GBC in it's own in the correct place in drop downs?

Code: Select all

<ul id="nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}
{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}
{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}
{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span></a>
{/if}

{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
{/if}

[Dr.CSS]

You may want to use the number system, put numbers in spots where you think you want it to appear, like 1, 2, 3, etc. all over the menu template then use it and look at page source to see where/if they appear then you may get an idea where to put you code...

[Jonny]

Thanks for the useful pointer.

The content needs to be added at the point marked "HERE":

Code: Select all

<ul id="nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string="<ul>" times=$node->depth-$node->prevdepth}HERE
{elseif $node->depth < $node->prevdepth}

	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}

Simply adding the GCB tag at that position results in it being inserted at the top of each submenu, but using the following to target the required content

Code: Select all

{if $node->extra1 == 'teaser'}{global_content name=$node->extra2}{/if}

results in the menu displaying unaltered: nothing in the source to indicate any change. The {if} statement appears to have been completely ignored.

The above staement does work and will return the desired GCB if placed in some other places in the template, just not in the location where it's needed. Perhaps I'm missing something in the Smarty functionality and a nested {if} can't deliver the goods in this case, or more stages are required in the template.

[Dr.CSS]

Not sure why you don't just use something like a section header at the top of your children for that drop and put all your teaser stuff into the menu text...

[Jonny]

Not sure why you don't just use something like a section header at the top of your children for that drop and put all your teaser stuff into the menu text...

Thanks for the idea, but as far as I can see, html markup in a section header's menu text results in html markup in the menu. Put text in and texttext comes out. The source for the list element showing:

Code: Select all

<li class="sectionheader"><span> <p>text</p> </span>><dfn>1.1: </dfn><p>text</p></li>

[Dr.CSS]

Well you never did say what was going to be in the teaser so yes it will be literal about what is in it...

[Jonny]

Well you never did say what was going to be in the teaser so yes it will be literal about what is in it...

Maybe the term "mega dropdown" would have more clearly illustrated what I'm aiming for. I'm looking to present a marked up and styled area of content to one side of drop down menus including text and image/s, for the purpose of attracting attention to particular items that the client wishes to give emphasis.

Any ideas as to why the {if} statement has no effect in the location I indicated?

[calguy1000]

And where does the 'content' come from?. that's the question.

Once we know where this content is supposed to come from and how you will maintain it, maybe somebody would be able to provide a starting menu manager template.

Again people... please spend the time and provide a provide as much information as possible.... too much information is better than not enough.  Many people on this forum won't even bother to reply if the first thing they have to do is ask a question that should've been in the original post.

[Jonny]

And where does the 'content' come from?. that's the question.

As stated in the first post, the source of the content will be Global Content Blocks.