Results 1 to 2 of 2

Thread: Apple style Accordion Menu

  1. #1
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Apple style Accordion Menu

    1) Script Title:
    Apple style Accordion Menu

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...silverheader=0
    3) Describe problem:

    I have 0 knowledge in JavaScript. The article is awesome and I found it very useful. I was trying to place an Accordion inside an accordion to build something similar to tree view (Family Tree). However, I faced some problems with opening and closing tabs.

    Example :

    Code:
     <div class="applemenu" id="div1">
            <div class="silverheader" id="div2"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
    	    <div class="submenu" id="div3">
                <div>
                    <div class="applemenu" id="dev4" style="width:160px;">
                        <div class="silverheader" id="div5"><a href="http://www.dynamicdrive.com">Dynamic Drive1</a></div>
    	                    <div class="submenu" id="div6">
                                Text1<br />
                            </div>
                        <div class="silverheader" id="div7"><a href="http://www.dynamicdrive.com">Dynamic Drive2</a></div>
    	                    <div class="submenu" id="div14">
                                Text2<br />
                            </div>
                        <div class="silverheader" id="div8"><a href="http://www.dynamicdrive.com">Dynamic Drive3</a></div>
    	                    <div class="submenu" id="div9">
                                Text3<br />
                            </div>
                    </div>
                </div>
            </div>
            
            <div class="silverheader" id="div10"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
    	        <div class="submenu" id="div11">
    	        Some random content here<br />
    	        </div>
            <div class="silverheader" id="div12"><a href="http://www.cssdrive.com">CSS Drive</a></div>
    	        <div class="submenu" id="div13">
    	        Some random content here<br />
    	        <img src="http://i27.tinypic.com/sy7295.gif" />
    	        </div>
        </div>
    When I place the mouse over Dynamic Drive1, Dynamic Drive2, or Dynamic Drive3 it opens the tab and closes the main one immediately (Dynamic Drive.)


    Also,
    I tried to place two accordions at the same page. However, when I place the mouse over one tab it closes any open tab on the second one.

    I wanted something when I go over the tab it closes the previous ones at the same menu.

    Could you please help me with this problem?

    Thanx,
    Sami

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

    Default

    Accordion Menu does supported nested levels, although perhaps not intuitively. Check out Nested Bullet List Menu (2nd example on that page). The key is creating a nested accordion menu is to treat each level of category headers as a new instance of Accordion Content script, so the 2nd nested level in this case ("CSS Drive") would be a new instance. Taken from code on that page:

    Code:
    <script type="text/javascript">
    
    
    ddaccordion.init({ //top level headers initialization
    	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    	contentclass: "categoryitems", //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: [0], //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: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["prefix", "", ""], //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
    	}
    })
    
    ddaccordion.init({ //2nd level headers initialization
    	headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable
    	contentclass: "subcategoryitems", //Shared CSS class name of sub 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: ["opensubheader", "closedsubheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["none", "", ""], //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>
    
    <div class="arrowlistmenu">
    
    <h3 class="menuheader expandable">CSS Library</h3>
    <ul class="categoryitems">
    <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>
    
    <h3 class="menuheader expandable">CSS Drive</h3>
    <ul class="categoryitems">
    <li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
    <li><a href="http://www.cssdrive.com/index.php/menudesigns/" class="subexpandable">Menu Gallery</a>
    	<ul class="subcategoryitems" style="margin-left: 15px">
    	<li><a href="http://www.cssdrive.com/index.php/main/category/C34/">Blue Color</a></li>
    	<li><a href="http://www.cssdrive.com/index.php/main/category/C36/">Green Color</a></li>
    	<li><a href="http://www.cssdrive.com/index.php/main/category/C37/">Orange Color</a></li>
    	<li><a href="http://www.cssdrive.com/index.php/main/category/C33/">Red Color</a></li>
    	<li><a href="http://www.cssdrive.com/index.php/main/category/C38/">Brown Color</a></li>
    	</ul>
    </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>
    
    <h3 class="menuheader expandable">JavaScript Kit</h3>
    <ul class="categoryitems">
    <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
    <li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
    <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
    <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
    <li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
    </ul>
    
    <h3 class="menuheader" style="cursor: default">FeedBack</h3>
    <div>
    Regular contents here. Header does not expand or contact.
    </div>
    
    </div>
    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
  •