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

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!

Tags: , , , , , , | Posted under MojoPortal | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

Leave a Reply

Your email address will not be published. Required fields are marked *


− 1 = 0

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>