Accordion Menu Made Easy

SMFnub · June 20, 2008, 03:33:36 PM

I found this Accordion Code @ http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm?submenuheader=0

Working on my site: http://eoc.contemptsc.org/

Its so much easier to use the moo-pain in the ass.js that's posted here on this forum and it works great

Just go to the link above and read it over. I modified it to my needs below.

Here is my modified code:

Code Select

<!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: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //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: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["suffix", "<img src='Minus Image Location' class='statusicon' />", "<img src='Plus Image Location' class='statusicon' />"], //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"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})


</script>


<style type="text/css">

.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #262626;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: #262626 url(Image Location 1) no-repeat bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: orange;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(Image Location 2);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid red;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #262626;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}

</style>

</head>

<body>

<div class="glossymenu">
<a class="menuitem submenuheader" href="http://www.cssdrive.com">MENU TITLE</a>
<div class="submenu">
	<ul>
	<li><a href="URL LINK">LINK TITLE</a></li>
	<li><a href="URL LINK">LINK TITLE/a></li>
	<li><a href="URL LINK">LINK TITLE</a></li>
</div>
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >MENU TITLE</a>
<div class="submenu">
	<ul>
	<li><a href="URL LINK">LINK TITLE</a></li>
	<li><a href="URL LINK">LINK TITLE</a></li>
	<li><a href="URL LINK">LINK TITLE</a></li>
	</ul>
</div>
</body>
</html>

Dragooon · June 20, 2008, 03:51:29 PM

That'd break the XHTML validation and I've already made such block which works without breaking XHTML. Athough it uses Mootools not DD Scripts.

SMFnub · June 20, 2008, 08:50:06 PM

Yes I know you created one Dragoon. And yes that is why I mentioned that moo-pain in the ass, not worth the time script.

This one works awsome and its amazingly easy to use. Also it allowed me to create my own custom buttons for it, in a snap. Its faster, loads faster and easier to use.

There are many like me I'm sure, who couldn't care less about validation.

It works great with Firefox, without a hitch in Explorer. If it fails in Safari, stop using a mac then, frankly don't care.

Lastly not sure what is so awsome about this validation. According to the W3 validator, your site dragox.org has 300 errors in xhtml 1.0. And yet you say your site is XHTML 1.0 Valid? Actually for fun, I just threw in every site I visit daily and all fail that validation miserably.

IchBin · June 20, 2008, 09:37:51 PM

Dragooon didn't say anything about his site being Valid. If he's anything like me, he's always testing crap which throws validation errors.

I think his point was that he made one that was valid for those that care.

Dragooon · June 21, 2008, 05:28:19 AM

Yes, the one I made was valid(XHTML in sense). Didn't meant anything against you

. And I am one of those idiots who want there site validated, so I care about validation

.

But ATH, This is very good

.

Recent

User

Stats

Members

Stats

Users Online

Accordion Menu Made Easy

SMFnub

Dragooon

SMFnub

IchBin

Dragooon

This website is proudly hosted on Crocweb Cloud Website Hosting.