New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


Arrow Side Menu

Arrow Side Menu is a vertical list based menu that uses a single background image to create 3 distinct state. Headers that contain sub contents are activated via "clickgo" of the mouse. What this means is that each header is hyperlinked, with the link not disabled. When you click on such a header, first, the sub content expands, then, the user is taken to the URL specified in the header. You can change this behavior by modifying the "revealtype" option of the menu:

revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"

A value of "click" for example causes the header to solely expand/contract the sub content, and disables the link inside the header itself (if it's hyperlinked).

The below demo uses "revealtype=clickgo", which means when you click a header to expand its contents, at the end of the animation, the user is taken to the actual URL set in the header.

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

  1. ddaccordion.js

Full HTML Source:

Select All

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

Table Of Contents