Urban Gray Accordion Menu

New Revised CSS Library Forums Web Tools

Home Dynamic Content Accordion Content script Accordion Menu Urban Gray Accordion Menu

Urban Gray Accordion Menu

Urban Gray Accordion Menu is a clean, vertical menu with headers that are activated "mouseover" (200 millisec delay). Each header is hyperlinked itself, feasible since the headers are toggled "mouseover" instead of "onclick". This is an easy to customize, attractive vertical list menu.

CSS Library

JavaScript Kit

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"> <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: "headerbar", //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: "normal", //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"> .urbangreymenu{ width: 190px; /*width of menu*/ } .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/ margin-bottom: 0; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 7px 0 7px 31px; /*31px is left indentation of header text*/ } .urbangreymenu .headerbar a{ text-decoration: none; color: white; display: block; } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ } .urbangreymenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /*link text is indented 8px*/ text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ /*hover state CSS*/ color: white; background: black; } </style> <body> <div class="urbangreymenu"> <h3 class="headerbar"><a href="http://www.dynamicdrive.com/style/">CSS Library</a></h3> <ul class="submenu"> <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="headerbar"><a href="http://www.javascriptkit.com">JavaScript Kit</a></h3> <ul class="submenu"> <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/dhtmltutors/">DHTML & CSS</a></li> <li><a href="http://www.javascriptkit.com/howto/">Web Design</a></li> <li><a href="http://www.javascriptkit.com/java/">Free Java Applets</a></li> </ul> </div> </body> </html>

The menu uses a single bullet image 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)
- Arrow Side Menu ("clickgo")

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

CSS Library

JavaScript Kit

Table Of Contents

Urban Gray Accordion Menu