[Solved] Make a Chameleon Menu Style

[Reid]

Hi,

I am new to the Menu component and have it working for the most part with the help of Telerik staff here in this group (thanks).

My next task is to alter the .css to adapt the menu UI to the specs.  In this case the design is very basic where all menu items will match the background of the parent div. (horizontal bar, full width).  And all the item's fonts will be white and a bit bolder than the Telerik Default which is loading now.

While I am not the fastest at JQuery or JS in general, I know I could write some JQuery to set the attributes.  My question is, are there any styles that would make the menu a Chameleon so to speak with respect to it's background?  The designer wants to see just the white top level menu items and then the dropdown backgrounds would have the same color with white text as well.

Thanks,

Reid

[Kamen Bundev]

Hello Reid,

Can you show me a design mockup of this menu and I can help you style it.

Regards,
Kamen Bundev
the Telerik team

[Reid]

Hello Kamen,

Thank you for responding.  I have attached two screen shots.  What is is now and what it needs to be.  The designer has created the wireframe to show what he wants.  One change that the wireframe does not show is that we would like to have the top menu items when contracted blend in with the darker div behind it, but when expanded would show a lighter backgroud matching the children.


Reid

[Kamen Bundev]

Hello Reid,

You can remove the borders and backgrounds with CSS, like this:

.t-menu
{
 background: none;
 border-color: transparent;
}
.t-menu .t-item
{
 border-color: transparent;
}
.t-menu .t-state-hover,
.t-menu .t-item:hover > .t-link
{
 color: white;
 background: silver;
}
.t-menu .t-animation-container, 
.t-menu .t-group, .t-menu-context 
{
    left: 0;
}
.t-menu .t-group
{
 background: silver;
 border-color: transparent;
}

Regards,
Kamen Bundev
the Telerik team

[Reid]

HI Kamen,

Very good!  Much appreciated.  Design slows me down the most.  That's why I use Telerik controls!

Thanks,
Reid