Welcome to Geeklog, Anonymous Tuesday, April 23 2024 @ 10:57 am EDT
Geeklog Forums
Menu elements multi colors
Status: offline
::Ben
Forum User
Full Member
Registered: 01/14/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
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
6
8
Quote
Status: offline
beewee
Forum User
Full Member
Registered: 08/05/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
Dutch Geeklog sites about camping/hiking:
www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net
8
5
Quote
Status: offline
::Ben
Forum User
Full Member
Registered: 01/14/05
Posts: 1569
Location:la rochelle, France
jquery gived me another solution.
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
Text 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
4
6
Quote
Status: offline
beewee
Forum User
Full Member
Registered: 08/05/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
10
7
Quote
Status: offline
beewee
Forum User
Full Member
Registered: 08/05/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
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
5
7
Quote
All times are EDT. The time is now 10:57 am.
- 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