Page 1 of 2 12 LastLast
Results 1 to 10 of 14

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

  1. #1
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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:

    Code:
    <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
    Last edited by apostle_of_hustle; 06-24-2008 at 06:49 PM. Reason: clarify

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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:

    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

  3. The Following 2 Users Say Thank You to ddadmin For This Useful Post:

    apostle_of_hustle (06-25-2008),crisaa (08-12-2008)

  4. #3
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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:

    Code:
    $('.'+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
      }
    })

  5. #4
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #5
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Adding a link to a header title in the accordion menu

    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.

  7. #6
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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?
    DD Admin

  8. #7
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

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

    Default

    Quote Originally Posted by ddadmin View Post
    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

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

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

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

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

    Code:
    <a class="menuitem submenuheader openpageanyway" href="http://www.cssdrive.com">CSS Drive</a>
    Last edited by jscheuer1; 02-11-2009 at 11:53 AM. Reason: fine tune instructions as to placement of the added code - later: add timeout
    - John
    ________________________

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

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

    gargiulo (02-12-2009)

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    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

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
  •