WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: bupaje on August 12, 2013, 07:38:51 PM

Title: Menu > Colors
Post by: bupaje on August 12, 2013, 07:38:51 PM

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?

(http://www.stormvisions.com/images/menu-colors.jpg)

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.

Title: Re: Menu > Colors
Post by: jacobi22 on August 12, 2013, 09:20:30 PM

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

Title: Re: Menu > Colors
Post by: bupaje on August 12, 2013, 11:22:56 PM

Ah, perfect - thanks very much. :)

Title: Re: Menu > Colors
Post by: Tez Oner on August 13, 2013, 09:04:39 PM

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

Title: Re: Menu > Colors
Post by: nibz on August 13, 2013, 09:09:02 PM

One downside to using :nth-child in css:

Quote from: http://www.w3schools.com/cssref/sel_nth-child.asp

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

Title: Re: Menu > Colors
Post by: Tez Oner on August 14, 2013, 11:35:06 PM

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/ (http://www.sitepoint.com/browser-trends-may-2013/)

Cheerz,

Tez Oner

Title: Re: Menu > Colors
Post by: nibz on August 14, 2013, 11:48:06 PM

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.