Results 1 to 9 of 9

Thread: Help: Need Accordian Menu headerclass to display content and expand/collapse

  1. #1
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need Help: Glossy Accordian Menu - Click Menu Header to Display Content & Expand

    1) Script Title:
    Glossy Accordian Menu Script

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

    3) Describe problem:
    How do I configure (or modify the JS) to have the headerclass expand AND display content (like a regular menuitem) when clicked on?

    Thanks,

    Brian
    Last edited by NTX_Brian; 02-11-2008 at 12:12 AM.

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

    Default

    Do I need to ask in a different way?
    Last edited by NTX_Brian; 02-10-2008 at 02:13 AM.

  3. #3
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anyone have a suggestion for me?

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Please don't bump a thread repeatedly. Regarding your question, you may be misunderstanding the purpose of the "headerclass". It is meant to act as the toggler of some other content's visibility, and never expands/contracts on its own. So there is no content to show, since the headerclass is never hidden to begin with. Based on this characteristic of headerclass, what you're asking doesn't seem feasible nor logical.

  5. #5
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I apologize for the bumps. I was fearful that my request wasn't clear enough.

    I fully understand the design for the Accordian Menu. I wish to alter it a bit to make it a more flexable solution.

    I have Menu Headers that point to <a> tags for the main content, in this example it's 'lions.html' and 'tigers.html'

    the Submenu items 'sublions1' & 'sublions2' are detail for the main content.

    I need to display the <href> in the menu header when it's clicked & expand / contract the sub menus.

    Here's the example:

    http://www.fragmire.com/menutest/lions.html

    Any help would be appreciated.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Sure, you can have content within the header also expand/ contract as its sub contents do. However, your headers would need to be something like DIV tags (and not <a> tags), as you can nest additional <a> tags within an <a> tag). So using the 1st menu example, which uses DIV headers, try adding the below as a standalone page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    
    <script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
    
    <script type="text/javascript" src="ddaccordion.js">
    
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    
    <script type="text/javascript">
    
    
    ddaccordion.init({
    	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    	contentclass: "categoryitems", //Shared CSS class name of contents group
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "normal" //speed of animation: "fast", "normal", or "slow"
    })
    
    
    </script>
    
    <style type="text/css">
    
    .arrowlistmenu{
    width: 180px; /*width of accordion menu*/
    }
    
    .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 14px Arial;
    color: white;
    background: black;
    margin-bottom: 10px; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    padding: 4px 0 4px 10px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;
    }
    
    .arrowlistmenu .menuheader a{
    color: yellow;
    }
    
    .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
    background: darkred;
    }
    
    .arrowlistmenu ul{ /*CSS for UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
    }
    
    .arrowlistmenu ul li{
    padding-bottom: 2px; /*bottom spacing between menu items*/
    }
    
    .arrowlistmenu ul li a{
    color: #A70303;
    background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
    display: block;
    padding: 2px 0;
    padding-left: 19px; /*link text is indented 19px*/
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #dadada;
    font-size: 90%;
    }
    
    .arrowlistmenu ul li a:visited{
    color: #A70303;
    }
    
    .arrowlistmenu ul li a:hover{ /*hover state CSS*/
    color: #A70303;
    background-color: #F3F3F3;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="arrowlistmenu">
    
    <h3 class="menuheader expandable">CSS Library
    <a href="#" class="showhide">Testing</a>
    </h3>
    <ul class="categoryitems">
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
    </ul>
    
    <h3 class="menuheader expandable">CSS Drive</h3>
    <ul class="categoryitems">
    <li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
    <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
    <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
    <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
    <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
    </ul>
    
    <h3 class="menuheader" style="cursor: default">FeedBack</h3>
    <div>
    Regular contents here. Header does not expand or contact.
    </div>
    
    </div>
    
    </body>
    </html>
    And use the attached modified ddaccordion.js file in place of the original. With it, any content with a CSS class of "showhide" within a header will also expand/contract as the sub contents do.

  7. #7
    Join Date
    Feb 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I believe NTX_Brian meant that, he wants the menu expands and also have the header to link to an url at the same time... i have seen sites that offers that, most likely not using js...but I really like this glossy accordion menu, so really hoping there could be a solution towards expanding submenu and opening url at the same time...

    what about this?

    Creates an Accordion from the given navigation list, cloning the header element to produce a clickable link.

    jQuery('#nav').Accordion({ header: '.head', cloneFirst: true });


    <ul id="nav">
    <li> <a class="head" href="books/">Books</a>
    <ul> <li><a href="books/fantasy/">Fantasy</a></li>
    <li><a href="books/programming/">Programming</a></li> </ul>
    </li> <li> <a class="head" href="movies/">Movies</a> <ul>
    <li><a href="movies/fantasy/">Fantasy</a></li>
    <li><a href="movies/programming/">Programming</a></li> </ul> </li> </ul>



    would this work? its not working for me...but maybe someone will be able to figure it out?
    Last edited by yuchien; 02-28-2008 at 01:13 AM.

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

    Default I have a similar problem

    I have accordian menu where I am using headers and an image to open and close the subitems. I want to do something where I can click on image to expand and collapse the submenu but when someone clicks on the text it should redirect to a url ... please let me know if u know how to do it or any thread which talks abt it ...

  9. #9
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Please start your own thread folks when asking your own question.

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
  •