No replies
wassa
Offline
newbie
Last seen: 14 years 26 weeks ago
Joined: 2008-08-04
Posts: 1
Points: 0

I am trying to make an expanded menu using CSS and Javascript. So far i've managed to build from a tutorial from another site and the expanding bit works.

This is where im at so far:
http://www.poker-society.co.uk/CHAOS/menu.html
The menu expands as long as i press the text link, but i want it to expand once ive pressed the image headings for the submenus, i.e Attacks, Armoury & Guild.

I understand basic html and css but im not sure what triggers the lists to expand as i cant see a javascript method call. I tried changing the

  • menu heading names and inserting images instead but to no avail.
  • Can anyone help me?

    Thanks

    CSS + Menu Code:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Menu Test</title>
     
    <script type="text/javascript" src="expandingMenu.js"></script>
     
    <style type="text/css">
    ul#menu {
      width: 200px;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
     
    ul#menu ol {
      display: none;
      text-align: left;
      list-style-type: none;
      margin: 0;
      padding: 0px;
    }
     
    ul#menu li, 
      ul#menu a {
      font-family: verdana, sans-serif;
      font-size: 11px;
      color: #8e0101;
    }
     
    ul#menu li.attack {
    background-image:url(Images/attack.jpg);
      line-height: 31px;
    }
     
    ul#menu li.armoury {
    background-image:url(Images/armoury.jpg);
      line-height: 31px;
    }
     
    ul#menu li.guild {
    background-image:url(Images/guild.jpg);
      line-height: 31px;
    }
     
     
    ul#menu ol li {
      background-image:url(Images/empty.jpg);
      font-weight: bold;
      text-align:center;
      border-bottom: none;
    }
     
    ul#menu a {
      text-decoration: none;
      outline: none;
    }
     
    ul#menu a:hover {
      color: #539dbc;
    }
     
    ul#menu a.active {
      color: #be5028;
    }
    </style>
    </head>
     
    <body>
    <ul id="menu">
      <li class="attack">Attacks                           <!-- Tried inserting image here -->
        <ol>
          <li><a href="#">Attack Player</a></li>
          <li><a href="#">Attack Log</a></li>
          <li><a href="#">My Hitlist</a></li>
        </ol>
      </li>
      <li class="armoury">Armoury
        <ol>
          <li><a href="#">Offensive</a></li>
          <li><a href="#">Defensive</a></li>
          <li><a href="#">Economic</a></li>
        </ol>
      </li>
      <li class="guild">Guild
        <ol>
          <li><a href="#">Sub Item 3.1</a></li>
          <li><a href="#">Sub Item 3.2</a></li>
          <li><a href="#">Sub Item 3.3</a></li>
        </ol>
      </li>
    </ul>
    </body>

    Javascript Code:

    /* This script and many more are available free online at
    The JavaScript Source :: <a href="http://javascript.internet.com" rel="nofollow">http://javascript.internet.com</a>
    Created by: Travis Beckham :: <a href="http://www.squidfingers.com" rel="nofollow">http://www.squidfingers.com</a> | <a href="http://www.podlob.com" rel="nofollow">http://www.podlob.com</a>
    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[i], filter)) result[result.length] = children[i];
      }
      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[i];
        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[i];
        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;// Java Document