Apple style Accordion Menu

New Revised CSS Library Forums Web Tools

Home Dynamic Content Accordion Content script Accordion Menu Apple style Accordion Menu

Apple style Accordion Menu

This menu mimics the look of the vertical menu found on certain areas of Apple.com. The headers are toggled via "mouseover" over each one (after 200 millisec delay), and the previous expanded header (if any) is closed before expanding the current. One header is forced to remain open at any time, by setting the parameter onemustopen: true. Note that this menu requires v1.5 or newer of the ddaccordion.js file to work. Menu structure wise, the menu consists simply of DIV tags instead of the typical UL and LI elements found in a standard menu. This structure makes it easy to include arbitrary HTML as the sub menu contents.

Tip: When setting up an Accordion Content to be toggled via "mouseover", give all the sub contents a common height instead of letting the contents inside dictate each one's height. This ensures the best user experience.

Dynamic Drive

Some random content here

CSS Examples

Some random content here

JavaScript Kit

Some random content here

CSS Drive

Some random content here

Coding Forums

Some random content here

Expand 1st header within menu above through a URL parameter

Required external file (right click, and select "Save As"):

ddaccordion.js

Full HTML Source:

Select All
<!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.4.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: "silverheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "mouseover", //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: true, //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: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["", "", ""], //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"> .applemenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; } .applemenu div.silverheader a{ background: black url(silvergradient.gif) repeat-x center left; 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: 5px 0; padding-left: 8px; text-decoration: none; } .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{ color: white; } .applemenu div.selected a, .applemenu div.silverheader a:hover{ background-image: url(silvergradientover.gif); color: white; } .applemenu div.submenu{ /*DIV that contains each sub menu*/ background: white; padding: 5px; height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/ } </style> </head> <body> <div class="applemenu"> <div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div> <div class="submenu"> Some random content here<br /> </div> <div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div> <div class="submenu"> Some random content here<br /> </div> <div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div> <div class="submenu"> Some random content here<br /> </div> <div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div> <div class="submenu"> Some random content here<br /> <img src="http://i27.tinypic.com/sy7295.gif" /> </div> <div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div> <div class="submenu"> Some random content here<br /> </div> </div> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> - <a href="current.htm?silverheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links: </p> <p> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> </body> </html>

The menu uses two images for the purpose of styling the menu (download by right clicking, and select "Save As"):

See the frontpage of Accordion Content script for a full explanation of each setting inside the script.

Script Index Page
Adding arbitrary links hat expand/ collapse the contents
Taking advantage of the oninit() and onopenclose() event handlers
Accordion Menu script
- Bullet list accordion menu (2 examples)
- Glossy accordion menu (2 examples)
- Apple style accordion menu (mouseover)
- Urban Gray accordion menu (mouseover)

Script Index Page Adding arbitrary links that expand/ collapse the contents Taking advantage of the oninit() and onopenclose() event handlers Accordion Menu script Apple style Accordion Menu

Table Of Contents

Apple style Accordion Menu