Make a collapsible menu stay open when a new page is loaded

Discussion in 'Javascript' started by cilardi@gmail.com, Jul 20, 2006.

  1. Guest

    I have a menu that I use on this website (http://sterneco.editme.com)
    that I got from The JavaScript Source. It works great in both Mozilla
    and IE and I am very happy with it but I have not been able to figure
    out how to make it stay open when a new page is loaded. My programming
    experience is pretty limited so I am having a hard time deciphering
    some of this code and thus am unsure where to even begin. If anyone has
    any ideas it would be greatly appreciated.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    ul#menu {
    width: 180px;
    list-style-type: none;
    border-top-style: none;
    margin-left: 20px;
    margin-right: 0px;
    padding: 0px;
    }

    ul#menu ol {
    display: none;
    text-align: left;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    }

    ul#menu li,
    ul#menu a {
    font-family: verdana, sans-serif;
    font-size: 12px;
    color: #0000FF;
    }

    ul#menu li {
    border-bottom: solid 1px #ffcc33;
    line-height: 20px;
    }

    ul#menu ol li {
    border-bottom: none;
    }


    ul#menu a {
    text-decoration: none;
    outline: none;
    }

    ul#menu a:hover {
    color: #539dbc;
    }

    ul#menu a.active {
    color: #be5028;
    }
    </style>

    <script type="text/javascript">
    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: Travis Beckham :: http://www.squidfingers.com |
    http://www.podlob.com
    version date: 06/02/03 :: If want to use this code, feel free to do so,
    but please leave this message intact. (Travis Beckham) */

    // Node Functions

    if(!window.Node){
    var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
    }

    function checkNode(node, filter){
    return (filter == null || node.nodeType == Node[filter] ||
    node.nodeName.toUpperCase() == filter.toUpperCase());
    }

    function getChildren(node, filter){
    var result = new Array();
    var children = node.childNodes;
    for(var i = 0; i < children.length; i++){
    if(checkNode(children, filter)) result[result.length] =
    children;
    }
    return result;
    }

    function getChildrenByElement(node){
    return getChildren(node, "ELEMENT_NODE");
    }

    function getFirstChild(node, filter){
    var child;
    var children = node.childNodes;
    for(var i = 0; i < children.length; i++){
    child = children;
    if(checkNode(child, filter)) return child;
    }
    return null;
    }

    function getFirstChildByText(node){
    return getFirstChild(node, "TEXT_NODE");
    }

    function getNextSibling(node, filter){
    for(var sibling = node.nextSibling; sibling != null; sibling =
    sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
    }
    return null;
    }
    function getNextSiblingByElement(node){
    return getNextSibling(node, "ELEMENT_NODE");
    }

    // Menu Functions & Properties

    var activeMenu = null;

    function showMenu() {
    if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
    }
    if(this == activeMenu){
    activeMenu = null;
    } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
    }
    return false;
    }

    function initMenu(){
    var menus, menu, text, a, i;
    menus = getChildrenByElement(document.getElementById("menu"));
    for(i = 0; i < menus.length; i++){
    menu = menus;
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
    }
    }

    if(document.createElement) window.onload = initMenu;
    </script>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    />
    <title>Untitled Document</title>

    <!-- To add more items to the menu add them here and the menu will
    change accordingly.
    Follow the format here and you should have no problems.-->

    </head>
    <body>
    <ul id="menu">
    <li>
    <a href="Home">Home</a>
    <ol>
    </ol>
    </li>

    <li>About Us
    <ol>
    <li><a href="Introduction">Introduction</a></li>
    <li><a href="contribute">Editing Guidelines</a></li>
    <li><a href="FAQ">FAQ</a></li>
    <li><a href="Contact">Contact Us</a></li>
    </ol>
    </li>
    (....some more code here, like above, but this was getting long)

    </ul>
    </body>
    </html>
    , Jul 20, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. NWx
    Replies:
    3
    Views:
    454
  2. ste
    Replies:
    11
    Views:
    34,816
    nobbiesp
    Jul 5, 2010
  3. Jonathan
    Replies:
    5
    Views:
    658
    BootNic
    Jan 6, 2007
  4. Jazzis
    Replies:
    4
    Views:
    157
    Jazzis
    Sep 26, 2003
  5. Paul
    Replies:
    2
    Views:
    137
Loading...

Share This Page