« »

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

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

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 (11)
Write

by George, 05/08/2008 02:08 AM
slashdot java disabled Reply

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, 05/08/2008 02:08 AM
slashdot java disabled Reply

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

by Cao Phong, 06/08/2008 10:08 PM
must enable JS to use this code Reply

This code will expand all items of all categories by default, you don't need to change anything.

by VÃ…Â© Quang, 28/09/2008 01:09 AM
chá»‰nh thÃ´ng sá»‘ nÃ o Ä‘á»ƒ default menu lÃ contract Reply

MÃ¬nh xin há»i pháº£i chá»‰nh thÃ´ng sá»‘ nÃ o Ä‘á»ƒ khi load thÃ¬ máº·c Ä‘á»‹nh cÃ¡c menu á»Ÿ dáº¡ng contract. hiá»‡n táº¡i nÃ³ Ä‘ang lÃ expand

by VÃ…Â© Quang, 28/09/2008 01:09 AM
chá»‰nh thÃ´ng sá»‘ nÃ o Ä‘á»ƒ default menu lÃ contract Reply

by Cao Phong, 29/09/2008 11:09 PM
Reply

báº¡n chá»‰ cáº§n thÃªm vÃ o code sau:
<code>
window.onload = slash_contractall;</code>

by Sms and quotes, 12/04/2010 02:04 PM
Nice job Reply

nice job, but in which languate you all are talking?

by Cao Phong, 13/04/2010 04:04 PM
Reply

we're Vietnamese, and you?

nice to meet you

by How To Jump Higher, 15/04/2010 12:04 PM
Reply

I tried it after seeing this post and it looks damn nice, so thank you sir. Oh, and my css skills are not that advanced, i'm pretty much a complete noob.

by latex mattress, 04/06/2010 06:06 PM
Reply

Thanks for the information. I think I will try your program, maybe that's better than mine.

1 2

« previous next »

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (2)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

YeuNu.com war.money CoinHolo.com ABP3.com ZWVQ.com ApexBTC.com Card.rip ChainTutor.com pornID.net eChainBank.com index.services choose.works CreditCard.rip CryptoKD.com ChatTotal.com system.money CTRCoin.com choose.exchange this.bid XMQV.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
DimX [more]
11,907
11
6
2
0.22 KBytes

JavaScript Slashdot Navigation Menu

4.2/5 6 votes / 11,907 previews / 11 comment 30/01/2007 This vertical navigation menu is a stylish collapsible menu modelled after the navigational menu found on ...JavaScript Slashdot Navigation Menu - Slashdot Navigation Menu

Kaan2501[4] mrlonely larsen12 metallica87 hoangnm quoctuan conficker stone18k minhducmaihoa hoangphucthanh