PDA

View Full Version : Dynamic Accordion Menu?



MikeThrel
03-12-2009, 10:23 PM
1) Script Title: Glossy menu DD Accordion Menu (http://dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm)

2) Script URL (on DD): ddaccordion.js

3) Describe problem: I love the accordian menu from Dynamic Drive. I'm trying to make it dynamic and am failing miserably.

We're a software training company. Our class schedule is maintained in our database. I'm trying to come up with a solution to make our website's schedule page driven by our database. My idea was to export enough details from our Access database to a XML file and have the menu built on that. I couldn't make it work. So, I resorted to the idea of having the data exported to a .html file and having a DD Accordion menu built when the page loads by using the jQuery functionality like this:

<script type="text/javascript">
$(document).ready(function() {
$('<div id="info" class="glossymenu" />').load('menudetails.html #menu', function() {$(this).appendTo('#menucontainer')});

return false;

});

</script>

The main part of the menu builds and loads into the page, but not the submenus.

So, I'm posting my code hoping that someone can help me.

OR, maybe I'm going about this completely the wrong way. I've been programming for 21 years, but am new to the jQuery/Web way of developing. What would be the optimal solution for what I'm trying to do?

Basically: I have a database maintained with schedule info, what's the best way to get that info to my website without having to manually update our website using Dreamweaver. We run lots of different classes on lots of different dates so the maintenance can be a nightmare. And it's driving me crazy to have the info in our database and to not to be able to transfer that data to our website programatically.

Here's the code for my test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>


<script type="text/javascript" src="js/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">
$(document).ready(function() {
$('<div id="info" class="glossymenu" />').load('menudetails.html #menu', function() {$(this).appendTo('#menucontainer')});

return false;

});

</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
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
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
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
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='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "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 #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: black url(images/glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
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(images/glossyback2.gif);
}

.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 blue;
}

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

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

</style>

</head>

<body>

<div id="menucontainer"> </div>

</body>
</html>



And here's the code for the DD Accordion menu that I was trying to load dynamically using the .Load method:

<div id="menu" class="glossymenu">
<a class="menuitem" href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >CSS Examples</a>
<div id="sub1" class="submenu">
<ul>
<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>
</div>
<a class="menuitem" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a class="menuitem" href="http://www.javascriptkit.com/domref/">DOM Reference</a>
<a class="menuitem submenuheader" href="http://www.cssdrive.com">CSS Drive</a>
<div id="Sub2" class="submenu">
<ul>
<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>
<img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
</div>
<a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a>
</div>

ddadmin
03-13-2009, 12:57 AM
I think the real question you're asking is just how to display your schedule page dynamically based on data from your database. Integrating that output to work with the menu is a secondary issue. If so, that's really beyond the scope of what we can help you with, as that person needs to have access/ knowledge to your server and database itself.

As far as the best approach to dynamically outputting the contents for the menu, in general, that would be outputting the menu's HTML directly at time of page load, dynamically with code generated from the server (ie: with PHP, that would be echo()). This is a more efficient than using JavaScript to populate the menu's contents after the page has loaded. As long as what gets output to the browser looks identical to as if you've manually included the script on your page, it should work. While trying to get the output to work, use the browser's view source feature often to check that the code that's being output comes closer and closer to how it should look.

MikeThrel
03-13-2009, 03:30 PM
Thanks for your reply Admin. My reason for wanting to build the menu dynamically is that the type of classes we have scheduled will fluctuate; so I wanted to build a dynamic menu for the user to be able to follow the menu selections to get to the details of the class that they're looking for.

Sounds like I may need to start learning some PHP. :)

Any other ideas or input is certainly welcome.



I think the real question you're asking is just how to display your schedule page dynamically based on data from your database. Integrating that output to work with the menu is a secondary issue. If so, that's really beyond the scope of what we can help you with, as that person needs to have access/ knowledge to your server and database itself.

As far as the best approach to dynamically outputting the contents for the menu, in general, that would be outputting the menu's HTML directly at time of page load, dynamically with code generated from the server (ie: with PHP, that would be echo()). This is a more efficient than using JavaScript to populate the menu's contents after the page has loaded. As long as what gets output to the browser looks identical to as if you've manually included the script on your page, it should work. While trying to get the output to work, use the browser's view source feature often to check that the code that's being output comes closer and closer to how it should look.