Results 1 to 3 of 3

Thread: Help adding new menuitems on vertical accordion

  1. #1
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help adding new menuitems on vertical accordion

    1) Script Title: glossy accordion menus

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ubmenuheader=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>
    Last edited by ljwillia; 08-14-2008 at 06:24 PM.

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

    Default additional info

    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>

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

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

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
  •