« »

This vertical navigation menu is a stylish collapsible menu modelled after the navigational menu found on Slashdot. Session-only cookies are used to store the state of menu (whether it's expanded or not). Cool css navigation menu design!

New updates: you can now add a expand / contract all links on the navigation, to allow your visitors to easily toggle the visibility of all submenus. Furthermore, you can specify all submenus should be contracted by default for first loads (see top of "menu.js").

Label: Slashdot, navigation menu, navigation, collapsible menu, collapsible, cookie, state, submenu, expand, contract, load, onLoad, menu vertical, menu design

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<link rel="stylesheet" type="text/css" href="menu.css" />

Copy All x2

<script type="text/javascript" src="menu.js"></script>

Copy All x2

<p><a href="javascript:slash_expandall()">Expand</a>/
<a href="javascript:slash_contractall()">Contract</a></p>

    <div class="sdmenu">

      <span class="title" id="top"><img src="expanded.gif" class="arrow" alt="-" />Online 
		Tools</span>
      <div class="submenu">
        <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
        <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
        <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
        <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>

        <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
        <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
      </div>
      <span class="title"><img src="expanded.gif" class="arrow" alt="-" />Support 
		Us</span>
      <div class="submenu">
        <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
        <a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>

        <a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
      </div>
      <span class="title"><img src="expanded.gif" class="arrow" alt="-" />Partners</span>
      <div class="submenu">
        <a href="http://www.javascriptkit.com">JavaScript Kit</a>
        <a href="http://www.cssdrive.com">CSS Drive</a>
        <a href="http://www.codingforums.com">CodingForums</a>

        <a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
      </div>
    </div>

<p>Some text</p>

Comment (6)
Write

by George, 04/08/2008 12:08 PM
slashdot java disabled

how can you make it all expanded "only" when java disabled or how can you make it disappear if no java enabled?
I don't know if is easy or not because I am amateur..very amateur.
thanks

by george, 04/08/2008 12:08 PM
slashdot java disabled

do u know how to expand all "only" when javascript disabled?
or make it disappear when no javascript enabled?