WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Menu > Colors

(1/2) > >>

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: ---<?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);

?>
--- End code ---

result is a source-code like this for the menu


--- Code: ---<!-- 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>
--- End code ---

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:

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

--- End quote ---

Navigation

[0] Message Index

[#] Next page