Accordion Menu questions

[sassenach]

1) Script Title: Accordion Menu > Urban Gray Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-urban.htm

3) Describe problem:
A)if you look at my link below you will see my menu on the left side of the content area. you can see titles "women" and "men". when they open, i need them to stay the orange color as in the a:hover. and when they close, they should be the grey color. how can i do this?
B) if you look at my menu again where it says "women" and "men" there is an arrow on the right side. how can i place this arrow right after the titles? is there a way to measure the width of the title characters automatically, then know where to place that arrow?

3) My site url: http://juliamilano.com/index.php

thanks

[jscheuer1]

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, your first question, if I understand it, is easy. Add the three highlighted pieces of code to your style section for the selector indicated:

.product_menu .headerbar:hover, .selected {text-decoration: none;color: #ec9000!important;display: block;
background: url('/images/arrow_collections_on.gif') no-repeat 65px 4px!important; /*last 2 values are the x and y coordinates of bullet image*/}

The other question I believe has to do with the positioning of the background image. You could make an individual style for each headerbar. The WOMEN one looks about right, so you could leave that alone, add an id of 'men' or whatever to the MEN one, ex:

<h3 class="headerbar" id="men">Men</h3>

and set its background-position style property differently. Make sure to make a :hover and .select for it too, using the !important keyword as shown, place this style after the one used by both headerbar elements, something like:

#men, .selected#men,  .product_menu .headerbar#men:hover {
background-position: 40px 4px!important;
}

[sassenach]

1. the first one worked like a charm. question, do you see the down arrow "http://www.juliamilano.com/images/arrow_collections_on.gif" right after the "women" and "men"? can i change that arrow when those titles are open and closed?

2. this wont work well with this menu because this menu is dynamic. tomorrow we might need to add or change one of these titles, therefore i could never be sure what titles will appear. any ways to do it dynamically?

[sassenach]

1. when i added the important in the css it did something weird to the code.
look at the arrow at the bottom. it should not be there. the language titles on the top right are messed up. and the bottom right menu is messed up.
any ideas?

[jscheuer1]

The arrows do change (here) when an item is opened. I see no arrow at the bottom. The language thing also uses the selected class, that's what's messing it up. We must be more specific:

.product_menu .headerbar:hover, .product_menu .selected{text-decoration: none;color: #ec9000!important;display: block;
background: url('/images/arrow_collections_on.gif') no-repeat 65px 4px!important; /*last 2 values are the x and y coordinates of bullet image*/}

I suppose the position of the arrow could be dynamic. Like if you had spans around the text (currently WOMEN and MEN) within the H3 elements, you could check for those spans' offsetWidth:

<div class="product_menu"><h3 class="headerbar"><span>Women</span></h3>

You would have to remove the positioning (red) from the hover/selected style:

.product_menu .headerbar:hover, .product_menu .selected{text-decoration: none;color: #ec9000!important;display: block;
background: url('/images/arrow_collections_on.gif') no-repeat 65px 4px!important; /*last 2 values are the x and y coordinates of bullet image*/}

Then this script code should take care of it:

jQuery(function($){
	$('.product_menu .headerbar').each(function(){
		var h = $(this);
		h.css('backgroundPosition', (h.find('span')[0].offsetWidth + 10) + 'px 4px')
	});
});

[sassenach]

1. the language issue is fixed.
2. the <span> tag does work with the jquery you added, but how do i do the same for the hover & selected?

thanks again

[jscheuer1]

The hover/selected selector needs another change:

.product_menu .headerbar:hover, .product_menu .selected{text-decoration: none;color: #ec9000!important;display: block;
background-image: url('/images/arrow_collections_on.gif')!important;}

That way it can inherit the other property/values for background, including the scripted ones.

In fact, for simplicity's sake and ease of reading, it could be just:

.product_menu .headerbar:hover, .product_menu .selected {
  color: #ec9000!important;
  background-image: url('/images/arrow_collections_on.gif')!important;
}

[sassenach]

i made the changes as you displayed, but still don't see the arrow to the right after it is hover/selected.
please do a mouse over the titles "women" or "men" and see the orange arrow stuck on the left instead of the right.

[jscheuer1]

No you didn't, you have:

.product_menu .headerbar:hover, .product_menu .selected{text-decoration: none;color: #ec9000!important;display: block;background: url('/images/arrow_collections_on.gif') no-repeat!important; }

That should be:

.product_menu .headerbar:hover, .product_menu .selected {
  color: #ec9000!important;
  background-image: url('/images/arrow_collections_on.gif')!important;
}

[sassenach]

you are a genius!