multicolor mainmenu

condenser · Post by **condenser** » Thu Dec 13, 2007 3:36 am

Hello,

I hope this is the right place to ask this.

I want to create a multicolored mainmenu. Every item in the menu should have a different background color.
E.g. Link 1 = blue background; Link 2 = red background; ...
How could I solve this? CSS?
If I do it with CSS how can I address the different items from the menu. There are all just "a.mainlevel-nav" ?

I don't know how to start. Hopefully someone can give me a hint.

Thanks!

Colt_45 · Post by **Colt_45** » Thu Dec 13, 2007 4:17 am

You won't be able to do this with the Joomla core menu system.

Try using this menu extension for your multi-color menu
http://extensions.joomla.org/component/ ... Itemid,35/

raulbcordoba · Post by **raulbcordoba** » Thu Dec 13, 2007 9:10 am

Hi,

Colt is right, no way.

The extension he recommends is a good option but it says working only with images.

I found recently this one that could work really pretty:

http://extensions.joomla.org/component/ ... Itemid,35/

Images + text, could work, unless you'll have to tweak some core files.

Or.... why don't use an old school way?

Create one menu for each menu item, then add a CSS suffix for each one and place all in same module position. Then style them!

Best.

condenser · Post by **condenser** » Thu Dec 13, 2007 2:18 pm

Thank you!

Think I'll try the "oldschool" way first...

Pope Pius X2 · Post by **Pope Pius X2** » Thu Dec 13, 2007 2:29 pm

I had this problem recently. What I did was create a background image for the links and set it in the css so that they all had different backgrounds. If you need different link colours also, I used this Javascript function to get around the problem. What it does is look for links with specific text then changes the colour:

Code: Select all

function linkColor(tag, term, color){
	var link = document.getElementsByTagName(tag);
	
	for(i=0;i<link.length;i++){
		if(link[i].innerHTML == term){
			link[i].style.color = color;
		}
	}
	
}

Then, I called it in the body tag:

Code: Select all

<body onLoad="linkColor('a', 'Home', '#FFFFFF'); linkColor('a', 'About Us', '#FF0000'); linkColor('a', 'Contact', '#003399');">

It is quite messy, but effective.

raulbcordoba · Post by **raulbcordoba** » Thu Dec 13, 2007 5:32 pm

Hi,

@condenser: great then! You'll know when to move further and play with harder things.

@Pope: hey, great snippet! Sounds really Pro, must try that. Thanks for sharing.

Best.

condenser · Post by **condenser** » Fri Dec 14, 2007 2:49 pm

Hi,

the JavaScript Function from Pope may work... but while working with multilingual content (the menu too) it doesn't make much sense ... as one would have to parse all menu items in all used languages...
Or is "term" something different from the link text which could be specified within the menu properties?

Cheers

Pope Pius X2 · Post by **Pope Pius X2** » Fri Dec 14, 2007 5:07 pm

condenser wrote: Hi,

the JavaScript Function from Pope may work... but while working with multilingual content (the menu too) it doesn't make much sense ... as one would have to parse all menu items in all used languages...
Or is "term" something different from the link text which could be specified within the menu properties?

Cheers

Like I said mate, it is messy and you would need to call the function for every menu item and you would need to do it manually within the actual template. Someone may be able to write a small snippet of PHP code that means it would take each link in a menu and output the Javascript function so that it's becomes more manageable and automated but I'm up to my eyeballs in work at the moment and it would still be quite a messy solution.

To be honest my friend, I would look down other avenues as client side CSS manipulation for what seems to be an important aspect of your website is more trouble than it's worth. I only came up with this function because my client needed his website in a rush and I had a similar problem to you, and even then I only used it because I know he isn't interested in changing menus or anything like that, just editing pre made articles. I'm sure someone will find it useful but I'd probably recommend you using something else.

aynamohol · Post by **aynamohol** » Mon Dec 12, 2011 10:54 am

Hi,
I can give you a solution...

Solution is... you have to delete the css codes of the menu from the template.css, if exist.

then you have to write the css, using following li classes...

Code: Select all

.item1 { background: red; }
.item2 { background: blue; }
.item3 { background: pink; }
.item4 { background: #f4f4f4; }
.item5 { background: #333; }
.item6 { background: purple; }
.item7 { background: green; }
.
.
.
.
.item(N) { background: N; }

you also can use the superfish menu module, if use the superfish menu mod... you also have to edit superfish.css

The Joomla! Forum™

multicolor mainmenu

multicolor mainmenu

Re: multicolor mainmenu

Re: multicolor mainmenu

Re: multicolor mainmenu

Re: multicolor mainmenu

Re: multicolor mainmenu

Re: multicolor mainmenu

Re: multicolor mainmenu

Re: multicolor mainmenu