PDA

View Full Version : Is it possible to add individual 'background' images to the Apple Accordion Menu?



Raubie
06-17-2010, 08:56 PM
1) Script Title: Apple Accordion Menu script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm

3) Describe problem: Probably a tricky thing to do, but I was wondering if it is possible to add individual background pictures to the open menus below the header name.

I looked at the code and wouldn't even knew where to begin. I don't want the same image appearing twice, and only want one or two with individual background images. In-line images are simple, but are background images possible with this script?

My apologies if this has been addressed earlier (I did look).

Many thanks. ~ Raubie

azoomer
06-17-2010, 09:37 PM
this approach can get you a specific picture in the backgroung of selected menu points

.applemenu div:nth-child(2){
background: url("http://i27.tinypic.com/sy7295.gif"); background-repeat:no-repeat;

}
.applemenu div:nth-child(4){
background: url("http://i27.tinypic.com/sy7295.gif"); background-repeat:no-repeat;

}
Try this first, then change the picture url to your images and finally experiment with the number in parenthesis

azoomer
06-17-2010, 10:06 PM
Raubie, while this selector works fine in FF, chrome, safari and opera, I just discovered that internet explorer unfortunately doesn't support it. Maybe someone else knows of a better way to select this ? I guess it will work if you do it with jQuery though. I might try this out.

azoomer
06-17-2010, 10:25 PM
Alright, this is the same made with jQuery


<script type="text/javascript">
$(document).ready(function(){
$('.applemenu div:nth-child(2)').css({
backgroundImage :'url("http://i27.tinypic.com/sy7295.gif")',
backgroundRepeat: 'no-repeat'
});
});
</script>
and it actually works in internet explorer. You can see it here (http://azoomer.com/accordionJQ/). Well that's my 2 cents worth. Maybe someone else has a smarter solution.

Raubie
06-18-2010, 12:14 AM
this approach can get you a specific picture in the backgroung of selected menu points

.applemenu div:nth-child(2){
background: url("http://i27.tinypic.com/sy7295.gif"); background-repeat:no-repeat;

}
.applemenu div:nth-child(4){
background: url("http://i27.tinypic.com/sy7295.gif"); background-repeat:no-repeat;

}
Try this first, then change the picture url to your images and finally experiment with the number in parenthesis
Quite brilliant, can't wait to try this out!

Thank you azoomer!

Raubie
06-18-2010, 12:21 AM
Alright, this is the same made with jQuery


<script type="text/javascript">
$(document).ready(function(){
$('.applemenu div:nth-child(2)').css({
backgroundImage :'url("http://i27.tinypic.com/sy7295.gif")',
backgroundRepeat: 'no-repeat'
});
});
</script>
and it actually works in internet explorer. You can see it here (http://azoomer.com/accordionJQ/). Well that's my 2 cents worth. Maybe someone else has a smarter solution.
WOW! I'd given up on this working in IE. Got to love jQuery!

Azoomer, I can't thank you enough for these three changes. I'm realizing how rusty I am.

Is there any way for the DD admins to add your improvements as addendum to the original post (or code)?

Thanks so much! ~ Raubie