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