[Solved]Each menu item different background colour?

[libralion]

Hi everybody,
I am struggling with the menu.
I use the cssmenu, but haven't really styled it.
I want to have a different background for each menu item. I already searched a lot but I don't know how to do this.
Can I for instance do this with the bmenu module?
Or is there an easier way to do this with css? I have no idea what to include in my stylesheet for that.
Thanks for your time.

Johanna

[uniqu3]

You could add a class for each of your menu item in MenuManager template for example with {$node->alias}, this would display alias of your page.

Code: Select all

<a class="menu-{$node->alias}"

With this you would have a class .menu-some-alias.
Then in your Stylesheet.

Code: Select all

#primary-nav li a.menu-some-alias {
    background: #f00;
}

Hope this helps you.

[opawaldburger]

You again

Here's what you can do. Give every list-element a unique class and then style it with CSS. For example you can call them menustyle{and here comes the menutext}. So if you have a site called 'Testtest', the list element's class would be menustyleTesttest.

I start with the relevant lines, otherwise it's just too much code here.

Code: Select all

.
.
.
  <li class="menuparent menustyle{$node->menutext}"><a class="menuparent" 
{else}
    <li class="menustyle{$node->menutext}">
  <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>
{/if}
{/foreach}
{repeat string='</li><li class="separator once" style="list-style-type: none;"> </li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

Adding menustyle{$node->menutext} to the li, gives you the power to change the background.

Hope it helps!

-opa

[opawaldburger]

Of course Goran was faster than me...

[uniqu3]

Of course Goran was faster than me...

Sorry

By the way {$node->menutext} wouldn't come out good if you have Menutext "About us", thats why i suggested alias.

[opawaldburger]

By the way {$node->menutext} wouldn't come out good if you have Menutext "About us", thats why i suggested alias.

You're definitaly right. I searched for something better, but didn't know that alias exists

[libralion]

You could add a class for each of your menu item in MenuManager template for example with {$node->alias}, this would display alias of your page.

Code: Select all

<a class="menu-{$node->alias}"

With this you would have a class .menu-some-alias.
Then in your Stylesheet.

Code: Select all

#primary-nav li a.menu-some-alias {
    background: #f00;
}

Hope this helps you.

Thanks, but I can't get it to work.
I added this to the cssmenu:

Code: Select all

<a class="menu-{$node->alias}"

And this is my menu stylesheet:

Code: Select all

/* Styling the basic apperance of the menu elements */
#primary-nav a {
  display: block;
  padding: 5px 10px;
  margin: 1px 0px;
  background-repeat: no-repeat;
  font: bold 1em Tahoma, Arial, Helvetica, sans-serif;
  color: #207091;
  text-decoration: none;
  min-height:1em; /* Fixes IE7 whitespace bug*/
}

#primary-nav a:hover {
  color: #d4bee8;
}

#primary-nav li a.menu-home {
    background: #5f4090;
}

But I can't see any background color.
What am I missing?

Johanna

[uniqu3]

You placed that bit of code in menumanager wrong probably as this is your sourcecode <a class="menuactive" ="" href="http://www.crea-express.nl/">, there is no class menu-home.

If you didn't change anything in original cssmenu this should work (backup your menumanager template before using this, just in case):

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. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{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}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes} menu-{$node->alias}" 
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent menu-{$node->alias}"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent menu-{$node->alias}" 
{else}
  <li>
  <a 
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
class="menu-{$node->alias}" href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

[libralion]

Wow. Thanks a lot! Works great!
Also thanks to Opa!

Johanna

[rgk]

Helped me a ton as well, thanks!!!!!

[twwitt]

Hey. This is really helpful.

But unfortunately, I can't figure out the CSS to style the second level (children) to mach the same color as the parents. (I don't have to style each separate child page, do I?)

Can someone help me with the CSS to style, for instance, this part of the menu? ul#primary-nav li ul -- the goal would be to have each of these second-level areas be a different color. Is that more coding of in menu manager, or just some css?

[Dr.CSS]

The CSS would be, [page-alias] being the parent alias...

a.[page-alias] a { background color style }

[twwitt]

The CSS would be, [page-alias] being the parent alias...

a.[page-alias] a { background color style }

Thanks for the reply, but I don't think I have it yet.

I can successfully change the background to the parent alias (which is menu-about) with:

#primary-nav li a.menu-about{
background: #589a3e;
}

But I want to now change the background to all the subpages in the dropdown menu below that. But doing

#primary-nav li a.menu-about a {
background: #589a3e;
}

doesn't change anything. What am I missing?

[uniqu3]

You need class from page alias on list element and not link, as style will not inherit from parent , link has no children but list element does.

So <li class='alias'>
then:
.alias a {background: #f00}
or
li.alias a,
li.alias li a { background: #f00}

[twwitt]

Thanks. Sorry I'm not better at this coding language. So, what you're saying is that back in the menu template, I need to take out

<a class="{$classes} menu-{$node->alias}">

and instead have:

<li class="{$classes} menu-{$node->alias}">

Is that right?