Glossy Accordion Menu: need ability to have header used as a link as well as expand

[apostle_of_hustle]

1) Script Title: Glossy Accordion Menu v1.5

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

3) Describe problem: I am using the Glossy Accordion Menu and need to have menu headers also behave as links, for example:

<a class="menuitem submenuheader" href="www.yahoo.com" target="contentframe">Go to Yahoo</a>
  <div class="submenu">
    <ul>
      <li>....</li>
      <li>....</li>
    </ul>
  </div>

I would like for the menu header "Go to Yahoo", to not only toggle the submenu items, but also link to www.yahoo.com.

I saw here in the forums there was a post similar to this, but when I tried to apply it to the Glossy Accordion Menu I could not get it to behave as expected.

Is there a way to achieve this behavior with the Glossy Accoridon Menu?

Thank you

[ddadmin]

The best way to do this from a usability perspective is to set the headers to expand/contract onMouseover instead of the default onClick. When you do this, the header if hyperlinked will go to the destination pages when clicked on, such as in the demo: http://www.dynamicdrive.com/dynamici...menu-apple.htm

Changing this behavior is done simply in your configuration code:

//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: true

[apostle_of_hustle]

Thanks for the response, however my organization wants to stay with the onClick revealtype.

I was able to achieve the desired behavior by adding a special css class to each <a> tag that needs to be a header as well as a hyperlink.

Then I modified the ddaccordion.js file to check for this special class:

$('.'+config["headerclass"]).bind(config.revealtype, function(){
  if (config.revealtype=="mouseenter"){
    ddaccordion.expandone(config["headerclass"], parseInt($(this).attr("headerindex")))
  }
  else{
    $(this).trigger("evt_accordion")
    if ($(this).attr('class').indexOf('showhide') != -1 
        && $(this).get(0).href != null 
        && $(this).get(0).href.length > 0)
    {
        return true
    }
    return false //cancel default click behavior
  }
})

[spirofantasio]

This sounds like the kind of solution that I need. You couldn't point us towards your website in order that we can get a more detailed view of how you solved it?

You say, for example, that you added "a special css class to each <a> tag". What was the name of the class; did it require any special type of coding in the css file?

Thanks.

[crisaa]

Hi,

I am as well trying to have a link in the header of the collapsible menu, and that the collapsible menu is able to be opened by clicking in it an not rolling over it. I tired with the mouseover and it worked but, I am as well required by boss to have the link and the expanded info be clicked on. I have seen on a previous reply the code that was added to the ddaccordion.js. I am unsure of where exactly was this code entered in the ddaccordion.js file? Is there a way you guys can help me.

Thank you.

[ddadmin]

Hi Crisaa:
Honestly I still don't understand how or why one would have a header both act as a link and expand a content at the same time. The two are conflicting actions. If the header acts as a link, then the user most likely will be taken away to the target page before the content on the previous page has a chance to fully expand. In these situations, isn't it better just to have the header act as a link- period- without getting it to also expand a content using this script?

[strobe73]

Hi

I am to looking at a solution to this. I am surprised you seem to not understand the uses for this. I have this situation on a catalog site I am doing.

The headers being the parent categories with the sub categories in the expanded list. When you click on the parent category it should take you to the page that displays products from all its sub categories.

Look forward to a solution

Cheers Ben

[gargiulo]

Hi Crisaa:
Honestly I still don't understand how or why one would have a header both act as a link and expand a content at the same time.

No, they are not conflicting actions.
Example: you have a products catalog organized this way:

• category

• subcategory

When you click on any category header of the accordion, you go to another page. This page will show the accordion menu expanded (now you see the subcategories related to the category header you clicked). The same target page shows all subcategories related to the category you clicked.
I don't see any conflicting action here.
What do you think?

I definitely think that this is a feature that should be implemented and switchable in the accordion options.

Ciao .

tony

[jscheuer1]

Since this is jQuery, we can easily add that functionality independent of the Glossy Menu script. Just put this script on or linked to your page, anywhere after the jQuery and Glossy Menu scripts (right before the style block if using the 'Entire HTML Source code' from the demo page):

<script type="text/javascript">
(function($){
 $(function(){
  $('.submenuheader').click(function(){
   var l = this.href;
   setTimeout(function(){window.location.href = l;}, 300);
  });
 });
})(jQuery);
</script>

.submenuheader designates all submenuheader classed links to also switch to that page, regardless of what else they may do. Just make sure that any submenuheaders you treat this way have valid href attributes. If you only want some of the submenuheader's to do this, use/add a separate class, ex:

<script type="text/javascript">
(function($){
 $(function(){
  $('.openpageanyway').click(function(){
   var l = this.href;
   setTimeout(function(){window.location.href = l;}, 300);
  });
 });
})(jQuery);
</script>

Then in your markup:

<a class="menuitem submenuheader openpageanyway" href="http://www.cssdrive.com">CSS Drive</a>

[gargiulo]

Since this is jQuery, we can easily add that functionality independent of the Glossy Menu script. Just put this script on or linked to your page, anywhere after the jQuery and Glossy Menu scripts (right before the style block if using the 'Entire HTML Source code' from the demo page)

Great!
Thanks, it works.

I'm almost done.

I have only a strange behaviour on the menu: in Firefox the button area (excludind the text) will toggle the menu (expand/collapse) and the link doesn't work. If I click on the button text/link the menu will toggle and the link works. The same happens with Opera 9 and IE 8+.

In IE 6, only the text link will work. The button will not expand/collapse; when you mouseover the button area the cursor is an arrow, not a pointing hand. But, at least, you get the expanded menu on the target page.

If only I could make the button area to behave the same way on the whole button area...

What I'm trying to get is: I click on the menu header (just any point inside the button area, not only on the text) and I get to the target page where the menu will be rendered as expanded.

Is this possible?

TIA again.

tony