Joomla Templates Club 406,261 posts

[jhicks Friend jhicksJoin date: March 2011Posts: 94Downloads:0Uploads:15 Thanks: 29 Thanked: 12 times in 1 posts]

#173721

OK, I’m not very good at CSS but I have been able to do most of what I needed by searching these forums. thanks to all!

I changed the css of the mega menu to show a picture using addition class in the menu. I would like to add code so when you hover over the picture in the menu title that it doesn’t default to the menu styling and instead uses code specific to the additional class. Otherwise the picture disappears when you hover on it.

Here my code change to add the picture in the menu (I have 4 lines like this for each menu title where I added a picture using the additional class)

.ja-megamenu ul.level2 li.mega a.mega.specialm-icon{
background: url(/images/special.png) no-repeat center center;
display: block;
width: 160px;
height: 50px;
text-indent: -999em;
overflow: hidden;
}

Here’s a picture showing the menu

website: http://kentonnewhope1.com

Thank you,
Jeff

---

Attachments:

1. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#437693

Hi,
You go to Template manager,choose JA Tiris template, then change CSS Optomize fieds to NO, so I can check how and where to customize for you.

[jhicks Friend jhicksJoin date: March 2011Posts: 94Downloads:0Uploads:15 Thanks: 29 Thanked: 12 times in 1 posts]

#437700

ok, I did that.

thanks for your help!

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#437711

You find this code from http://kentonnewhope1.com/templates/ja_tiris/css/menu/mega.css

ja-megamenu ul.level1 li.over .level2 a.mega:hover, .ja-megamenu ul.level1 li.haschild-over .level2 a.mega:hover {
background: url(../../images/bullet-2.png) 0 13px no-repeat; < change this line
color: #BA1115;
}

[jhicks Friend jhicksJoin date: March 2011Posts: 94Downloads:0Uploads:15 Thanks: 29 Thanked: 12 times in 1 posts]

#437716

ok, that changed it for over menu item. I would like it to change specific to the “additional class” settings. I have added 4 extra class settings and would like the “hover” to be specific to these classes. So for the child-icon class I would like the hover to be a particular picture, for the specialm-icon class I would like it to be another picture.

Example: I added an additional class setting for this menu

when I hover on this menu, I would like a specific picture (maybe the same one) for only this menu (associated with just this class)

I have added 4 classes like this in which I would like them all to have a different hover picture.

Thanks for your help,
Jeff

---

Attachments:

1. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#437728

Example: for menu has class is child-icon. You replace the code

.ja-megamenu ul.level2 li.mega a.mega.child-icon{
background: url(/images/childrensm.png) no-repeat center center;
display: block;
width: 160px;
height: 70px;
text-indent: -999em;
overflow: hidden;
}
with


.ja-megamenu ul.level2 li.mega a.mega.child-icon, .ja-megamenu ul.level2 li.mega a.mega.child-icon:hover {
background: url(/images/childrensm.png) no-repeat center center !important;
display: block;
width: 160px;
height: 70px;
text-indent: -999em;
overflow: hidden;
}

1 user says Thank You to khoand for this useful post

1. jhicks

[jhicks Friend jhicksJoin date: March 2011Posts: 94Downloads:0Uploads:15 Thanks: 29 Thanked: 12 times in 1 posts]

#437736

Awesome!!! It worked.

thanks so much!!

[Author]

Posts