Menu > Colors

[bupaje]

I was wondering if there was a way to have a menu with each new 'tab' having a background color assigned automatically, perhaps from a list of predesignated colors?



So I might create a group of descending shades of blue for example and each new top level page added would use the next color from the list? 

As an alternative I guess I could find a way to set a unique ID for each top level menu item and then over ride the background color for each of those but thought I'd ask.

[jacobi22]

you can use [sib] as a counter for the menu-childrens and combined this [sib] with a css-class -> class="[class] color[sib]

as example

Code: [Select]

<?php

show_menu2(1, SM2_ROOT, SM2_START,  SM2_ALL|SM2_TRIM|SM2_PRETTY,'<li><a href="[url]" class="[class] color[sib]"><span>[menu_title]</span></a>', '</li>', '<ul>', '</ul>', false, false);

?>
result is a source-code like this for the menu

Code: [Select]

<!-- show_menu2 -->
 <ul class="menu">
    <li><a href="/wb_jacobi22/" class="menu-expand menu-current menu-first color1"><span>Home</span></a>    </li>
    <li><a href="/wb_jacobi22/webdesign" class="menu-expand menu-sibling color2"><span>Webdesign</span></a>    </li>
    <li><a href="/wb_jacobi22/referenzen" class="menu-expand menu-sibling color3"><span>Referenzen</span></a>    </li>
    <li><a href="/wb_jacobi22/privates" class="menu-expand menu-sibling menu-last color4"><span>Privates</span></a>    </li>
 </ul>
use css-class color1 - color4 for your background-colors

[bupaje]

Ah, perfect - thanks very much.

[Tez Oner]

Hey,

could also be done with CSS using the :nth (child) selector,
eg; ul > li > li:nth-child(2) means that to the 2nd li of any li
can be selected for CSS-styling.

http://illegalistic.nl/pages/posts/applying-a-css-class-to-a-child-object-4.php

Cheerz,

Tez Oner

[nibz]

One downside to using :nth-child in css:

The :nth-child() selector is supported in all major browsers, except IE8 and earlier.

[Tez Oner]

Hey,

indeed a pity for IE8 users in this case check what the target group
of the website is... IE8 was released in yes... 2009 some few months and
it's 5 years old and it's about 10% of total browser usage.

http://www.sitepoint.com/browser-trends-may-2013/

Cheerz,

Tez Oner

[nibz]

I know.
But you have to take it in as considoration, to support or not support IE8 and <.

I guess you can check for yourselfe (google analytics). Then you know if your target group needs backward compatibility.