PDA

View Full Version : Help adding new menuitems on vertical accordion



ljwillia
08-14-2008, 03:55 PM
1) Script Title: glossy accordion menus

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm?submenuheader=0

3) Describe problem: I am brand new to this. I'm working on my first web site and am not at all proficient. I am building these menus in dreamweaver cs3. I've built with 4 menuitems each with subheaders and it works beautifully. When I try and add a 5th menuitem with subheaders it works fine but does not take on the css style. It simply appears as links below the glossy menus. I am building the menus in a side bar and thought it might have something to do with the length of the sidebar but those parameters appear to be fine. I am still in the building phase and have not uploaded this to a server so I can't provide you with a URL to check. Sorry, I'm posting the code below.

I am using the ddacordionmen.js and the jquery1.2.6min.js ( I had previously used the jquery 1.2.2 pack.js with the same results)

Thanks, in advance!

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title><a href="maintemplate.dwt">Untitled Document</a>
<!-- TemplateEndEditable -->
<link href="../CssFiles/twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
#box1{
position: absolute;
top: 50px;
left: 100px;
border: solid 3px #000000;
background-color: #ffff00;
visibility: hidden;
}
</style>

<script language="JavaScript">
function show_it(){
document.all.box1.style.visibility = "visible";
}

function hide_it(){
document.all.box1.style.visibility = "hidden";
}
</script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<script type="text/javascript" src="../jquery-1.2.6.min.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: false, //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='plus.gif' class='statusicon' />", "<img src='minus.gif' 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{
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
margin-top: 0px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
}

.glossymenu a.menuitem{
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;
background-color: #0000FF;
background-image: url(../ephones_images/glossyback.gif);
background-repeat: repeat-x;
background-position: left bottom;
}


.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(../ephones_images/glossyback2.gif);
background-color: #999999;
}

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

<body class="twoColLiqLtHdr">

<div id="container">
<div id="header"> <img src="../Banner.gif" width="850" height="101" /><!-- end #header -->
</div>

<div id="sidebar1"><!-- TemplateBeginEditable name="navbartitle" -->
<h3>Navigation </h3>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Glossymenu" -->
<div class="glossymenu"> <a class="menuitem" href="http://www.ts.vcu.edu/faq/network/help.html">Report a Problem</a><a class="menuitem submenuheader" href="" >Products and Services</a>
<div class="submenu">
<ul>
<li><a href="">Telephones</a></li>
<li><a href="">Voice Mail</a></li>
<li><a href="">Cell Phones</a></li>
<li><a href="">Pagers</a></li>
<li><a href="">Long Distance Service</a></li>
<li><a href="">Student Services</a></li>
<li><a href="">Other</a></li>
<li><a href="">Browse All</a></li>
</ul>
</div>
<a class="menuitem" href="https://supportcenter.vcu.edu/arsys/shared/login.jsp?/arsys/forms/adm202.vcu.edu/Remedy+Requester+-+New+Request/Requester-Tele/">Billing Inquiry</a> <a class="menuitem submenuheader" href="" >Request New Service</a>
<div class="submenu">
<ul>
<li><a href="">Telephone</a></li>
<li><a href="">Voice Mail</a></li>
<li><a href="">Cell Phones</a></li>
<li><a href="">Pagers</a></li>
<li><a href="">Long Distance Service</a></li>
</ul>
</div>
<a class="menuitem" href="" >Change existing service</a> </div>
<!-- TemplateEndEditable -->
<!-- end #sidebar1 -->
</div>

ljwillia
08-14-2008, 04:02 PM
The code in the first post was from the template I created. This is the HTML page code that I modified to incorporate a 5th menuite called "administrative options". This menu is the one that is not taking on the css style for the glossy menu.

<div id="sidebar1"><!-- InstanceBeginEditable name="navbartitle" -->
<h3>Voice Mail </h3>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Glossymenu" -->
<div class="glossymenu">

<a class="menuitem submenuheader" href="QuickTips.html">Quick Tips </a>
<div class="submenu">
<ul>
<li><a href="">Printable Commands</a></li>
<li><a href="">Voice Mail Access Numbers</a></l>
</ul>
</div><a class="menuitem submenuheader" href="" >Getting Started</a>
<div class="submenu">
<ul>
<li><a href="">Set Up–Initializing Your Mailbox</a></li>
<li><a href="">Send All Calls to VM</a></li>
</ul></div><a class="menuitem submenuheader" href="" >Review and Respond to Messages</a>
<div class="submenu">
<ul>
<li><a href="">Review Voice/Fax/eMail</a></li>
<li><a href="">Printing a Fax Message</a></li>
<li><a href="">Reply to a Message</a></li>
<li><a href="">Forward a Message</a></li>
<li><a href="">Delete a Message</a></li>
<li><a href="">Save a Message</a></li>
</ul>
</div>
<a class="menuitem" href="">Recording and Sending Messages</a> </div>
<a class="menuitem submenuheader" style="border-bottom-width: 0" href="">Administrative Options</a>
<div class="submenu"> <ul>
<li><a href="">Creating Greetings</a></li>
<li><a href="">Recording Your Spoken Name</a></li>
<li><a href="">Recording a Personal Greeting</a></li>
<li><a href="">Recording an Extended Absence Greeting</a></li>
<li><a href="">Deleting an Extended Absence Greeting</a></li>
<li><a href="">Personal Distribution Lists</a></li>
</ul> </div>
<!-- InstanceEndEditable -->
<!-- end #sidebar1 -->
</div>

ddadmin
08-15-2008, 05:32 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.