Results 1 to 4 of 4

Thread: Remove First Submenu from Apple-style Accordion Menu

  1. #1
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Remove First Submenu from Apple-style Accordion Menu

    Hello all,
    Please bear with me as I try and wrangle an understanding of this script.

    Script title: Apple style Accordion Menu

    Script URL: http://www.dynamicdrive.com/dynamici...menu-apple.htm

    My Test Site: http://www.richardmfg.comli.com

    My Problem:
    1. I would like to remove the submenu under "HOME" as it does not contain anything. The "HOME" button simply returns the user to the default page. I attempted to remove the <div class="submenu"></div> after the <div class="silverheader" title="pages/home.php"><a href="javascript:void(0)">HOME</a></div>, but this resulted in the button below it ("PRODUCTS") expanding. When you click "HOME", it does display the default page, but the second button expands.

    2. I am using an iframe to display content pages. I would like to load the page with all menu headers collapsed, but if I place null brackets in the init portion like this: defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content, I get a javascript error because there is no expanded header as called for here: myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header

    Any help would be greatly appreciated.

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

    Default Additional Information

    Here is the full initialization code that I am using (direct from http://www.dynamicdrive.com/dynamici...menu-apple.htm). I am using the script provided at http://www.dynamicdrive.com/dynamici...uppliment2.htm to add the iframe capability.


    Code:
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //Shared CSS class name of contents group
    	revealtype: "clickgo", //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: false, //persist state of opened contents within browser session?
    	toggleclass: ["", "selected"], //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
     	myiframe=window.frames["content"] //reference and cache iframe to populate
     	var lastexpandedindex=expandedindices.pop() //get last index within array
     	myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
     	if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user clicking or moving mouse over it
     	myiframe.location.replace(header.getAttribute('title'))
    }
    }
    })
    Last edited by jscheuer1; 10-29-2012 at 02:25 PM. Reason: Format

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

    Default

    To make your "HOME" header simply act as a regular header, you need to remove the designated CSS class "silverheader" from its DIV tag, or the code in red below:

    Code:
    <div class="silverheader" title="pages/home.php"><a href="javascript:void(0)">HOME</a></div>
    The "silverheader" class is the designated class specified in your initialization code that tells the script that this header is an expandable header. With it removed, you can go ahead and also remove the sub DIV following it:

    Code:
    <div class="submenu" style="height: 0;padding:0 0 0 0;margin:0 0 0 0"></div>
    Now, you probably want the style of this header to be consistent with that of the other expandable headers. In that case in your CSS, you would simply define another arbitrary CSS class that shares the same style declarations of "silverheader", then add that class inside the DIV of your "HOME" header:

    Code:
    .applemenu div.silverheader a, .applemenu div.nonexpandableheader a{
    background: black url('images/silvergradient_test.gif') repeat-x left 50%;
    font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding-left: 8px;
    text-decoration:none;
    	padding-right: 0;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    
    .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active, .applemenu div.nonexpandableheader a:visited, .applemenu div.nonexpandableheader a:active{
    color: white;
    }
    
    .applemenu div.selected a, .applemenu div.silverheader a:hover, .applemenu div.nonexpandableheader a:hover{
    background-image: url('images/silvergradientover.gif');
    color: white;
    }
    In this case the arbitrary CSS class is called "nonexpandableheader".
    DD Admin

  4. The Following User Says Thank You to ddadmin For This Useful Post:

    HiPower (11-08-2012)

  5. #4
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    ddadmin,
    Thanks for the help. I appologize for getting back to this so late, but I got temporarily reassigned. I attempted a solution similar to the way you described it, but the problem I found was that this also removed "HOME" from the array and if I used the defaultexpanded: [0] portion to activate the header, I would get the wrong header activated (in my case, "PRODUCTS"). If I use defaultexpanded: [], no header is activated on page load and I get a 404 in place of my iframe page. I was able to overcome the problem by overriding the standard styling of the first submenu div
    Code:
    <div class="submenu" style="height: 0;padding:0 0 0 0;margin:0 0 0 0"></div>
    . This forced the HOME header to remain closed, while retaining it as the "0" index in the array.

Similar Threads

  1. Resolved Apple style Accordion Menu
    By rexi in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-08-2011, 04:43 PM
  2. Apple style accordion Menu
    By kennyzita in forum CSS
    Replies: 6
    Last Post: 09-08-2009, 03:27 PM
  3. Apple Style Accordion menu
    By mig2000 in forum Graphics
    Replies: 1
    Last Post: 01-26-2009, 09:15 PM
  4. Apple style Accordion Menu does not work in submenu
    By WoodGuy in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-26-2008, 07:33 AM
  5. Help: Apple style accordion menu
    By khsouenkol in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-28-2008, 11:45 PM

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
  •