Menu with different colors needed

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
nembrionic
New Member
New Member
Posts: 3
Joined: Thu Jun 16, 2011 2:15 pm

Menu with different colors needed

Post by nembrionic »

I have included an example of what I need but I'm not sure how to get it to work.

Basically, I need 4 main menu items + children, but these should have different colors per category.

As you know, CMSms simply loops through everything and then generates the menu. Is it possible to use the Menu Manager to make the thing I want? Perhaps using counters and some extra CSS?

For the life of me I have no idea how to make it work.

I'm currently using the supplied "cssmenu.tpl":

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - 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="menuwrapper">
<ul id="primary-nav">
{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}"><span>{$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}

Anyone? Any help will be greatly appriciated :)

Cheers,
Eric
Attachments
menuexample.png
menuexample.png (6.3 KiB) Viewed 1808 times
johnflan
Forum Members
Forum Members
Posts: 38
Joined: Thu Aug 23, 2007 5:20 pm

Re: Menu with different colors needed

Post by johnflan »

I too am looking for something like this, so if anyone has a bright idea please let us know.

I'm updating an old website http://www.stmarysblackburn.ac.uk/ where the top level menu tabs were hard coded - not an elegant solution but it worked.
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Contact:

Re: Menu with different colors needed

Post by Rolf »

A quick search in the forum:
http://forum.cmsmadesimple.org/viewtopi ... =8&t=38665

grtz. Rolf
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
johnflan
Forum Members
Forum Members
Posts: 38
Joined: Thu Aug 23, 2007 5:20 pm

Re: Menu with different colors needed

Post by johnflan »

Thanks for you're quick reply. There's also this solution by Uniqu3 which I found v easy to apply:
http://forum.cmsmadesimple.org/viewtopi ... color+menu
Post Reply

Return to “Layout and Design (CSS & HTML)”