Results 1 to 2 of 2

Thread: Multi level accordion menu

  1. #1
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multi level accordion menu

    Hi,

    I am using following code for accordion menu.
    <!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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.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", "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: ["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: "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: 268px; /*width of menu*/
    border: 0px solid #000;
    border-bottom-width: 0;
    }

    .glossymenu a.menuitem{
    background: pink 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 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(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: #8FD3D3;
    colorz: white;
    }

    </style>

    </head>

    <body>

    <div class="glossymenu">

    <a class="menuitem submenuheader" href="#" >Electronics</a>
    <div class="submenu">
    <ul>
    <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>
    </ul>
    </div>
    <a class="menuitem" href="#">Kitchen & Home</a>
    <a class="menuitem" href="#">Textiles & Clothes</a>
    <a class="menuitem submenuheader" href="#">Bags</a>
    <div class="submenu">
    <ul>
    <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>
    </ul>

    </div>

    </body>
    </html>


    How can i use it as multi level, i tried but it does not work.
    Please help me.
    its urgent.

  2. #2
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The structure for multi-level unordered list menus is generally as follows:


    <ul>
    <li>Parents
    <ul>
    <li>Child 1</li>
    <li>Child 2
    <ul>
    <li>Grandchild 1</li>
    <li>Grandchild 2</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

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
  •