PDA

View Full Version : Help: Need Accordian Menu headerclass to display content and expand/collapse



NTX_Brian
02-08-2008, 06:44 PM
1) Script Title:
Glossy Accordian Menu Script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.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

NTX_Brian
02-08-2008, 09:14 PM
Do I need to ask in a different way?

NTX_Brian
02-11-2008, 12:12 AM
Anyone have a suggestion for me?

ddadmin
02-11-2008, 06:15 AM
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. :)

NTX_Brian
02-12-2008, 03:22 AM
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.

ddadmin
02-12-2008, 05:32 AM
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 (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm), which uses DIV headers, try adding the below as a standalone page:


<!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.

yuchien
02-27-2008, 06:49 PM
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?

nijani
07-25-2008, 05:26 PM
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 ...

ddadmin
07-25-2008, 09:47 PM
Please start your own thread (http://www.dynamicdrive.com/forums/forumdisplay.php?f=2) folks when asking your own question.