Last items of menu different css class

This is a forum to suggest new features for mojoPortal. 

This thread is closed to new posts. You must sign in to post in the forums.
4/14/2011 2:34:45 PM
Gravatar
Total Posts 355

Re: Last items of menu different css class

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?

4/21/2011 2:11:53 PM
Gravatar
Total Posts 63
Jerry McCreary
SureFire Studios, Inc.

Re: Last items of menu different css class

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.

 

4/21/2011 2:21:53 PM
Gravatar
Total Posts 2253

Re: Last items of menu different css class

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
 

4/21/2011 2:25:52 PM
Gravatar
Total Posts 355

Re: Last items of menu different css class

Jerry,

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;
}

5/5/2011 3:42:31 PM
Gravatar
Total Posts 63
Jerry McCreary
SureFire Studios, Inc.

Re: Last items of menu different css class

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.

8/31/2011 6:08:40 AM
Gravatar
Total Posts 50

Re: Last items of menu different css class

if i may,

you can also use last-child pseudo-class, like this:

 

ul li:last-child
{
font-weight:bold


You must sign in to post in the forums. This thread is closed to new posts.