mojoPortal Tips: Making a Multi-Colored Dynamic Menu with CSS

Written by Carole Bennett Sunday, 2 October 2011

Earlier this year, I took on a project that needed a rainbow-themed menu; rather than try to create a rainbow-colored background for the menu, and hoping the text would align, I set about creating a menu with multiple colors that would support dynamic input for mojoPortal. Below, you’ll find the CSS I came up with to implement it in mojoPortal.

Caption 1: It can't be that easy, can it?

For the dropdowns, just take it to “submenu” instead of “menu”, and you should be set.  Below is an example of how to create a different menu look for each item in a menu, that will work in IE8 as well as all other civilized browsers.

<!–[if IE 8]>
<script language=”javascript”>
$(‘.art-hmenu li:nth-child(1)’).addClass(‘rainbowRed’);
$(‘.art-hmenu li:nth-child(2)’).addClass(‘rainbowOrange’);
$(‘.art-hmenu li:nth-child(3)’).addClass(‘rainbowYellow’);
$(‘.art-hmenu li:nth-child(4)’).addClass(‘rainbowGreen’);
$(‘.art-hmenu li:nth-child(5)’).addClass(‘rainbowBlue’);
$(‘.art-hmenu li:nth-child(6)’).addClass(‘rainbowPurple’);
$(‘.art-hmenu li:nth-child(7)’).addClass(‘rainbowViolet’);
</script>
<![endif]–>

.art-hmenu li:nth-child(1)
{
background-color:#e14045;
}

.art-hmenu li:nth-child(3)
{
background-color:#e27742;
}
.art-hmenu li:nth-child(5)
{
background-color:#f6ac23;
}
.art-hmenu li:nth-child(7)
{
background-color:#6aba83;
}
.art-hmenu li:nth-child(9)
{
background-color:#6a6ea3;
}
.art-hmenu li:nth-child(11)
{
background-color:#bd65c6;
}
.art-hmenu li:nth-child(13)
{
background-color:#c83488;
}

/*Because IE8 needs to be special*/

.rainbowRed
{
background-color:#e14045;
}

.rainbowOrange
{
background-color:#e27742;
}
.rainbowYellow
{
background-color:#f6ac23;
}
.rainbowGreen
{
background-color:#6aba83;
}
.rainbowBlue
{
background-color:#6a6ea3;
}
.rainbowPurple
{
background-color:#bd65c6;
}
.rainbowViolet
{
background-color:#c83488;
}

Bear in mind that this can also be used to create a unique, “newsletter-pasted” effect; just use differing background images instead of colors, and experiment with webkit fonts from a site such as Font Squirrel.

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting!