Results 1 to 2 of 2

Thread: Glossy Accordion Menu

  1. #1
    Join Date
    Nov 2009
    Thanked 0 Times in 0 Posts

    Default Glossy Accordion Menu



    I really liked this menu and it almost fits my needs.
    How can I change it so that the submenu expands/collapses only on the click on plus or a minus image and the menu header works like other menu items, a click on it takes you to a page.

    Thanks for the help in advance.
    Last edited by ddadmin; 11-06-2009 at 06:01 AM.

  2. #2
    Join Date
    Aug 2004
    Thanked 1,008 Times in 993 Posts
    Blog Entries


    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

    Sure, what you can do is manually insert the icons that when clicked on will expand a particular header next to the menu item in question, then inside your initialization code, specify that these icons will be acting as the togglers. Furthermore, customize the togglehtml[] option so the icon's src gets updated depending on the header's state. All in all, you get:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="" xml:lang="en">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="ddaccordion.js">
    * Accordion Content script- (c) Dynamic Drive DHTML code library (
    * Visit for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    <script type="text/javascript">
    	headerclass: "headericon", //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", "clickgo", 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: ["src", "minus.gif", "plus.gif"],
    	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
    <style type="text/css">
    margin: 5px 0;
    padding: 0;
    width: 170px; /*width of menu*/
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    .glossymenu a.menuitem{
    background: black url(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 .headericon{ /*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(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;
    <div class="glossymenu">
    <a class="menuitem" href="">Dynamic Drive</a>
    <a class="menuitem" href="" >CSS Examples <img src="minus.gif" class='headericon' /></a>
    <div class="submenu">
    	<li><a href="">Horizontal CSS Menus</a></li>
    	<li><a href="">Vertical CSS Menus</a></li>
    	<li><a href="">Image CSS</a></li>
    	<li><a href="">Form CSS</a></li>
    	<li><a href="">DIVs and containers</a></li>
    	<li><a href="">Links & Buttons</a></li>
    	<li><a href="">Other</a></li>
    	<li><a href="">Browse All</a></li>
    <a class="menuitem" href="">JavaScript Reference</a>
    <a class="menuitem" href="">DOM Reference</a>
    <a class="menuitem" href="">CSS Drive <img src="minus.gif" class='headericon' /></a>
    <div class="submenu">
    	<li><a href="">CSS Gallery</a></li>
    	<li><a href="">Menu Gallery</a></li>
    	<li><a href="">Web Design News</a></li>
    	<li><a href="">CSS Examples</a></li>
    	<li><a href="">CSS Compressor</a></li>
    	<li><a href="">CSS Forums</a></li>
    	<img src="" style="margin: 10px 5px" />
    <a class="menuitem" href="" style="border-bottom-width: 0">Coding Forums</a>		
    <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p>
    - <a href="current.htm?submenuheader=0">Expand 1st header within "submenuheader" header group</a><br />
    <p>Helpful links: </p>
    - <a href="">Adding arbitrary links hat expand/ collapse the contents</a><br />
    - <a href="">Taking advantage of the oninit() and onopenclose() event handlers</a><br />
    DD Admin


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts