This is a forum to suggest new features for mojoPortal.
Jerry,
Just bouncing through quickly - have a look at http://www.southernbells4equality.com - I used CSS selectors to set a different color for each menu item according to the order of the desired colors. Is that the kind of thing you're looking for?
IndigoTea -
Not what I need, but thanks for the input. I have a background image applied to the containing <ul> tag of the drop down. I'm need to apply a second background to cap that image. I was thinking to place the cap image as a background to either the top or bottom <li> element. I may can use javascript to accomplish it.
Hi Jerry,
You can use the last-child pseudo class to apply style to the last LI. If you can post a link to your site or possibly the generated menu markup, I can give you an exact selector for that last LI.
Thanks, Joe
What Joe D. says is pretty much what I did; the example is below. For the dropdowns, just take it to "submenu" instead of "menu", and you should be gravy. 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. Bon chance!
<!--[if IE 8]> <script language="javascript"> $('.art-menu li:nth-child(1)').addClass('rainbowRed'); $('.art-menu li:nth-child(2)').addClass('rainbowOrange'); $('.art-menu li:nth-child(3)').addClass('rainbowYellow'); $('.art-menu li:nth-child(4)').addClass('rainbowGreen'); $('.art-menu li:nth-child(5)').addClass('rainbowBlue'); $('.art-menu li:nth-child(6)').addClass('rainbowPurple'); $('.art-menu li:nth-child(7)').addClass('rainbowViolet'); </script> <![endif]-->
.art-menu li:nth-child(1) { background-color:#e14045; }
.art-menu li:nth-child(3) { background-color:#e27742; } .art-menu li:nth-child(5) { background-color:#f6ac23; } .art-menu li:nth-child(7) { background-color:#6aba83; } .art-menu li:nth-child(9) { background-color:#6a6ea3; } .art-menu li:nth-child(11) { background-color:#bd65c6; } .art-menu li:nth-child(13) { background-color:#c83488; }
/*Because IE8 is a boneheaded sack of poo, and 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; }
Thanks for the suggestions. I wasn't able to get it to work with the project I inherited. (There are hundreds of existing css styles in this project, I think there is some conflicts going on.) Anyway, I was able to use multiple background images (using CSS3) which accomplished what I'm needing.
if i may,
you can also use last-child pseudo-class, like this:
ul li:last-child { font-weight:bold
}