Welcome to Geeklog Thursday, June 20 2019 @ 07:10 pm EDT

Geeklog Forums

Menu elements multi colors


Status: offline

::Ben

Forum User
Full Member
Registered: 14/01/05
Posts: 1569
Location:la rochelle, France
Hello,

I would like to release a dynamic menu with a different background color for each element.
Did someone made this already or something similar?

Any suggestion is welcome.

Thanks,

::Ben
I'm available to customise your themes or plugins for your Geeklog CMS

Status: offline

beewee

Forum User
Full Member
Registered: 05/08/03
Posts: 969
Location:The Netherlands, where else?
I'm using Blaine's GL Menu on my daughters site (www.dogzz.nl), which has the option to choose a small image for each menu-item. You could try to change that to a background image, or css class?
Dutch Geeklog sites about camping/hiking: www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net

Status: offline

::Ben

Forum User
Full Member
Registered: 14/01/05
Posts: 1569
Location:la rochelle, France
Yes thanks for this. I will try it soon.

::Ben
I'm available to customise your themes or plugins for your Geeklog CMS

Status: offline

::Ben

Forum User
Full Member
Registered: 14/01/05
Posts: 1569
Location:la rochelle, France
jquery gived me another solution.

PHP Formatted Code
jQuery(function() {
    jQuery("#gl_menu >ul >li:nth-child(1) >a").css({'background-color' : 'orange', 'border' : 'none'});
    jQuery("#gl_menu >ul >li:nth-child(2) >a").css({'background-color' : 'red', 'border' : 'none'});
    jQuery("#gl_menu >ul >li:nth-child(3) >a").css({'background-color' : 'blue', 'border' : 'none'});
    jQuery("#gl_menu >ul >li:nth-child(4) >a").css({'background-color' : 'green', 'border' : 'none'});
    jQuery("#gl_menu >ul >li:nth-child(5) >a").css({'background-color' : 'pink', 'border' : 'none'});
});


See this demo menu

::Ben
I'm available to customise your themes or plugins for your Geeklog CMS

Status: offline

beewee

Forum User
Full Member
Registered: 05/08/03
Posts: 969
Location:The Netherlands, where else?
li:nth-child
is a mess with many versions of Internet Explorer!
Dutch Geeklog sites about camping/hiking: www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net

Status: offline

::Ben

Forum User
Full Member
Registered: 14/01/05
Posts: 1569
Location:la rochelle, France
Hello,

There was a javascript error on the demo page. Seems to work now with IE 6, 7, 8.

::Ben
I'm available to customise your themes or plugins for your Geeklog CMS

Status: offline

beewee

Forum User
Full Member
Registered: 05/08/03
Posts: 969
Location:The Netherlands, where else?
As far as I know IE6 does not support "li:nth-child".
Dutch Geeklog sites about camping/hiking: www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net

Status: offline

::Ben

Forum User
Full Member
Registered: 14/01/05
Posts: 1569
Location:la rochelle, France
I tested with IE Tester. Maybe it's not a safe test?

::Ben

I'm available to customise your themes or plugins for your Geeklog CMS

Status: offline

beewee

Forum User
Full Member
Registered: 05/08/03
Posts: 969
Location:The Netherlands, where else?
I don't know that tester, I usually use http://ipinfo.info/netrenderer/index.php

Buth this site states that IE6 simply does not support :nth-child: http://www.quirksmode.org/css/contents.html.

Perhaps there's a javascript hack used to get it rendered like it's supposed to do?

Anyway, your sample seems to work in IE6, so let's forget my blattering...
Dutch Geeklog sites about camping/hiking: www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net

All times are EDT. The time is now 07:10 pm.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content