Results 1 to 10 of 10

Thread: Accordion Menu questions

  1. #1
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Accordion Menu questions

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    .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:

    Code:
    <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:

    Code:
    #men, .selected#men,  .product_menu .headerbar#men:hover {
    background-position: 40px 4px!important;
    }
    Last edited by jscheuer1; 12-30-2009 at 01:15 PM. Reason: format code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    .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:

    Code:
    <div class="product_menu"><h3 class="headerbar"><span>Women</span></h3>
    You would have to remove the positioning (red) from the hover/selected style:

    Code:
    .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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The hover/selected selector needs another change:

    Code:
    .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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No you didn't, you have:

    Code:
    .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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    sassenach (01-05-2010)

  11. #10
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    you are a genius!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •