Expanding Navigation Menu onClick

Discussione in 'Javascript' iniziata da JavaScriptBank, 20 Maggio 2010.

  1. JavaScriptBank

    JavaScriptBank Bannato

    Registrato:
    26 Novembre 2009
    Messaggi:
    86
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    This is a simple expand collapse menu. The anchor tags that expand each menu are added by JavaScript, so the HTML code doesn't contain any event handlers or unnecessary HTML tags. The ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Copy & Paste CSS code below in your HEAD section
    CSS
    Codice:
    <style type="text/css">
    ul#menu {
      width: 100px;
      list-style-type: none;
      border-top: solid 1px #b9a894;
      margin: 0;
      padding: 0;
    }
    
    ul#menu ol {
      display: none;
      text-align: right;
      list-style-type: none;
      margin: 0;
      padding: 5px;
    }
    
    ul#menu li, 
      ul#menu a {
      font-family: verdana, sans-serif;
      font-size: 11px;
      color: #785a3c;
    }
    
    ul#menu li {
      border-bottom: solid 1px #b9a894;
      line-height: 15px;
    }
    
    ul#menu ol li {
      border-bottom: none;
    }
    
    ul#menu ol li:before {
      content: "-";
    }
    
    ul#menu a {
      text-decoration: none;
      outline: none;
    }
    
    ul#menu a:hover {
      color: #539dbc;
    }
    
    ul#menu a.active {
      color: #be5028;
    }
    </style>
    Step 2: Use JavaScript code below to setup the script
    JavaScript
    Codice:
    <script language="javascript">
    
    /*
    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[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;
    
    </script>
    Step 3: Place HTML below in your BODY section
    HTML
    Codice:
    <ul id="menu">
      <li>Menu Item 1
        <ol>
          <li><a href="#">Sub Item 1.1</a></li>
          <li><a href="#">Sub Item 1.2</a></li>
          <li><a href="#">Sub Item 1.3</a></li>
    
        </ol>
      </li>
      <li>Menu Item 2
        <ol>
          <li><a href="#">Sub Item 2.1</a></li>
          <li><a href="#">Sub Item 2.2</a></li>
          <li><a href="#">Sub Item 2.3</a></li>
        </ol>
    
      </li>
      <li>Menu Item 3
        <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>
    
      <li>Menu Item 4
        <ol>
          <li><a href="#">Sub Item 4.1</a></li>
          <li><a href="#">Sub Item 4.2</a></li>
          <li><a href="#">Sub Item 4.3</a></li>
        </ol>
      </li>
      <li>Menu Item 5
        <ol>
    
          <li><a href="#">Sub Item 5.1</a></li>
          <li><a href="#">Sub Item 5.2</a></li>
          <li><a href="#">Sub Item 5.3</a></li>
        </ol>
      </li>
    </ul>





     
Sto caricando...

Condividi questa Pagina