Page 1 of 1
Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 10:57 am
by kjoett
I have a concept for the menu, where the first level will be text-based links, the second level will have different images for each category, whitch is then again seperated into 3 categories (level 3) that will use the 3 different images, but will be the same for each level 2-categories.
Something like this:
1 (text)
2 (text)
2.1 (category-image)
2.1.1 (standard image 1)
2.1.2 (standard image 2)
2.1.3 (standard image 3)
2.2 (category-image)
2.2.1 (standard image 1)
2.2.2 (standard image 2)
2.2.3 (standard image 3)
2.3 (category-image)
2.3.1 (standard image 1)
2.3.2 (standard image 2)
2.3.3 (standard image 3)
...and so on.
Is this even possible in CMSMS?
Edit: I must confess I'm not really that PHP-savvy, so if it's PHP-related please be gentle
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 5:14 pm
by Dr.CSS
Yes you can do this, you need to use the page image drop to select images for each page except the ones where not wanted then in menu template something like {if image use it} {else} {menu-text} (not real calls just a guess), a little smarty goes a long way...
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 8:19 pm
by kjoett
Thank you for pointing me the right direction
When I finally knew what to search for, I found this:
http://forum.cmsmadesimple.org/index.php?topic=34126.0.
Now all I need to figure out is how to make the last list item on each level have a different class.
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 8:24 pm
by uniqu3
Like this
url}"{if $smarty.foreach.menuitem.last} class="last-item"{/if}>{$node->menutext}
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 8:27 pm
by kjoett
Fantastic! I love you guys!
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 8:49 pm
by kjoett
Okay, I might have rushed this one..
I can't get that last piece of code to work on just the last menuitem.. It affects all items except the active.
Is it the placement of the string?
Code: Select all
{* CSS classes used in this template:
#fotograf-menu-wrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#fotograf-menu - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="fotograf-menu-wrapper">
<ul id="fotograf-menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' 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' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}" {if $smarty.foreach.menuitem.last} class="last-item"{/if} {if $node->target ne ""} target="{$node->target}"{/if}><img src='{$gCms->config.image_uploads_url}/{$node->image}' alt="{$node->menutext}"/></span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 9:02 pm
by uniqu3
Sorry that was my bad, add this in foreach name=menuitem so it looks like:
{foreach from=$nodelist item=node name=menuitem}
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 9:15 pm
by kjoett
That helped, but "menuactive" overruns the "last-item" class.
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 9:35 pm
by uniqu3
Try this, should do the job now:
{* CSS classes used in this template:
#fotograf-menu-wrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#fotograf-menu - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
{foreach from=$nodelist item=node name=menuitem}
{if $node->depth > $node->prevdepth}
{repeat string='' times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string='' times=$node->prevdepth-$node->depth}
{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
type == 'sectionheader' and $node->haschildren == true}
{$node->menutext}{elseif $node->type == 'separator'}
{else}
type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}>config.image_uploads_url}/{$node->image}' alt="{$node->menutext}"/>
{elseif $node->type == 'sectionheader'}
>{$node->menutext}
{/if}
{/foreach}
{repeat string='' times=$node->depth-1}
{/if}
Re: Different menu-images for each menu-level
Posted: Mon Nov 08, 2010 9:39 pm
by kjoett
You, my friend, are a lifesaver!
Thank you so much for your patience!